データベースにphp/codeigniterで追加されるたびにリアルタイムリスナーを作成します

Question

私はajaxを使ったコードを持っています。私はこのことをリアルタイムで作りたい。私のajaxはmysqlデータベースからすべてのデータを取得することによって動作し、データを取得するたびに、すべてのデータを1つずつ取得するループを使用しました。

私が望むもの： 私はそれをループでもう一度取得しないようにするにはどうすればいいですか？私のデータベースに追加がある場合、再度ループするのではなくデータベース内で追加を取得するだけです。すべてのデータを何度も何度も取得する。 ？

はここでアヤックスに私のコードです：

function show_patients(getClinicID) { 
    $("#queue").empty(); 
    $.ajax({ 
     url: siteurl+"myclinic/get_patients/"+getClinicID, 
     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-5">'+'<small>Patient ID: <label id="patientID">'+data[i]['patient_id']+'</label></small>'+''+'<button onclick="checkstatus('+data[i]['patient_id']+');this.disabled=true;" id="btn'+data[i]['patient_id']+'" 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>'); 
      } 
     } 
    }); 
} 

私のコードは、それが複製防止$("#queue").empty();を使用してdiv要素をクリアし、何度も何度もデータを取得することによって動作します。私は何かしたい、すでにデータがある場合、追加されたデータは、ループを再開せずにdivを何度もクリアすることによって得られ、すべてのデータが追加されます。

Answer 1

毎回divを消去するのではなく、データを追加する必要があります。データベースからすべての追加データを取得するには、最後の患者IDをjavascript変数に保持し、この患者IDをサーバーに渡す必要があります。サーバー側では、最後の患者IDの後にすべてのデータを取得するための条件を追加します。 patient_idと仮定すると、データベース内の患者IDであり、あなたのクエリはあなたがmysqlのクエリで、あなたのすべての必要なその他の情報を追加することができ

select * from table where `patient_id` > PassedPatientId and `clinic_id` = ClinicId 

としてのようになるよりも、clinic_idは、診療所IDのです。これは、mysqlデータベースからすべての新しいデータを取得するための説明のためのサンプルクエリです。初めてpatient_idがnullになるので、nullでないときにpatient_idを条件に追加します。

var lastPatientID = null; 
function show_patients(getClinicID) { 
     $.ajax({ 
      url: siteurl+"myclinic/get_patients/"+getClinicID+"/"+lastPatientID, 
      type: "GET", 
      dataType: "JSON", 
      success: function(data) { 
       if(data.length>0) { 
       for(i=0;i<data.length;i++) { 
        lastPatientID = data[i]['patient_id']; 
        $('#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-5">'+'<small>Patient ID: <label id="patientID">'+data[i]['patient_id']+'</label></small>'+''+'<button onclick="checkstatus('+data[i]['patient_id']+');this.disabled=true;" id="btn'+data[i]['patient_id']+'" 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>'); 

       } 
      } 
     }); 
    } 

var lastPatientIDは、最後の患者をページでレンダリングし、新しい患者をすべて取得するためにサーバーに渡すjavascript変数です。