0





240
1

I have an AJAX function to fetch data from the and append it to HTML every 1sec,the reason why I use AJAX is because I have a lot of data to fetch from the database so I need to fetch it with limit (100 data per-limit), so I refresh the AJAX function using interval, the problem is the data that shown is always the same because, before the function finish, the interval refresh the function again, is there any way to solve this problem?

JQuery AJAX code:

var ctr = 0;
var pct = 0;
var total = 0;
var bnprd = "<?php echo $bonperiod;?>";
var bnsrt = "<?php echo $bonsort;?>";
var mybonperiod = "<?php echo $mybonperiod;?>";
var sc = '000';
var interval;

window.onload = function () { 
 {getDataNoBreak();}
};

interval = window.setInterval(function () {getDataNoBreak()}, 0);} //set the interval

function getDataNoBreak() {
      jQuery(document).ready(function() {
          jQuery.ajax({
              url: "{{ url('panel/bonus/payviasc/getDataNoBreak') }}",
              type: 'POST',
              data: {_token :'{{ csrf_token() }}',counter : ctr, bonperiod: bnprd, bonsort: bnsrt},
              dataType: "json",
              success: function(data) {
                  if(ctr==0){ total = data[0].total;}
                  for(var i =0; i < data.length; i++) {
                      if(data[i].loccd) sc = data[i].loccd;
                      else sc = '000';
                      var htm = '';
                      htm += '<tr>';
                      htm += '<td data-label="MEMBER">'+ data[i].dfno +' &nbsp;</td>';
                      htm += '<td data-label="MEMBER NAME">'+ data[i].fullnm +' &nbsp;</td>';
                      htm += '<td data-label="SC">'+ sc +' &nbsp;</td>';
                      htm += '<td data-label="PERIOD">'+ mybonperiod +' &nbsp;</td>';
                      htm += '<td data-label="GRADE">'+ data[i].level +' &nbsp;</td>';
                      htm += '<td data-label="BONUS">'+ data[i].totbns +' &nbsp;</td>';
                      htm += '<td data-label="SIGNATURE"> &nbsp;</td>';
                      htm += '</tr>';
                      $("#isi").append(htm);
                      pct += 1;
                      var totalPct = (pct/total)*100;
                      $("#progress".html('<div class="progress-bar progress-bar-striped active" style="width:' + totalPct + '%"></div>'));
                      $("#message").html('Loading data...');
                      if (totalPct == 100) {
                        completed();
                      }
                  }
                  if(ctr < total-1) ctr+=101;
              }
              ,
              error: function(data) {
              }
          });
      });
  }

function completed() { //when the interval is finish
    $("#message").html("Completed");
    if(pageBreak == 0){
      $('#payviabank').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": true,
        "ordering": false,
        "info": true,
        "autoWidth": false
      });
    }
    window.clearInterval(interval);
}
Question author Idham-choudry | Source

0


1

So first your interval is set to fire every 0 seconds, probably plays into it not working. However, what I think you want is to make another call on either success or complete. Just to simplify:

function makeRequest(payload){
    var options = {
        url : '/path/to/file.php',
        type : 'POST',
        data : payload,
        success : function(res){
            //do something with the (res)ponse, maybe make new payload
            makeRequest(newpayload); //make the call again
        }
    }
    $.ajax(options);
 }

Of course, you may need to pass in extra parameters to the makeRequest function in order to make sure you don't get the same data again.

Answer author Fauxserious

Ask about this question here!