Jc John Jc John - 1 month ago 6
jQuery Question

making realtime everytime there is an insert in database

i am using ajax, in getting data from database, i already manage to display my data using ajax, and also i want to make it, if there is additional in database, it will be automatically added in my view. How can i do that, i put my code in document.ready because everytime the user clicks my page, it will automatically display all the data, but my problem is this : When the user is viewing the page, and there are additional data in database, how can i make it something realtime to add it in users view right away, when it is viewing the page. I am using codeigniter.

Here is my code:

$(document).ready(function() {
show_patients();
});
function show_patients() {
$("#queue").empty();
$.ajax({
url: siteurl+"myclinic/get_patients",
type: "GET",
dataType: "JSON",
success: function(data) {
if(data.length>0) {
for(i=0;i<data.length;i++) {
$('#queue').append('<div class="col-sm-10">'+'<div class="panel-group">'+'<div class="panel panel-info">'+
'<div class="panel-heading">'+'<h4><a data-toggle="collapse" href="#patientinfo'+data[i]['patient_id']+'">'+data[i]['order_num']+' '+data[i]['patient_lname']+', '+data[i]['patient_fname']+' <span class="fa fa-arrow-circle-o-down pull-right"></span></a></h4>'+
'</div><!-- panel-heading -->'+'<div id="patientinfo'+data[i]['patient_id']+'" class="panel-collapse collapse">'+'<div class="panel-body">'+'<div class="row">'+
'<div class="col-sm-4">'+'<button class="btn btn-success btn-sm">Check me up</button>'+'</div><!-- col-sm-4 -->'+'<div class="col-sm-6">'+
'<div class="img-patient">'+'<div class="patient-pic" style="background-image: url('+data[i]['patient_photo']+')"></div>'+'</div><!-- img-patient -->'+'</div><!-- col-sm-6 -->'+'</div><!-- row -->'+
'</div><!-- panel-body -->'+'</div><!-- panel-collapse -->'+'</div><!-- panel -->'+'</div><!-- panel-group -->'+'</div><!-- col-sm-10 -->');
};
}
else {
$('#queue').append('<h4> No Patients in queue </h4>');
}
}
});
}

Answer

Just loop an ajax request.

setInterval(function() {
  $.ajax({
    url: "website.com/myclinic/get_patients_update.php",
    type: "POST",
    data: {id:'some data that contains the id of the last displayed patient'},
    dataType: "JSON",
    success: function(data) {
      alert(data);
    }
}, 60000); // 60 seconds

Within get_patients_update.php, check for $_POST value id, it should hold reference of the last displayed patient on the browser of the client. From what I see you can make a js global variable, and store data[i]['patient_id'] to it.

Using that information, query the database and check if newer results are available. If so, return a json response with the new data to append.

So your load code should still be the same, only modify it so you capture the last appended patient.

Just make sure this ajax request is behind a login wall, session data id send with ajax requests. Otherwise it can be a breach in security, patient data should be considered highly confidential.