Run Ajax request One by one on whole table

Question

I have a table with almost 300+ rows. On page load i need to call ajax request to update status of each row by row_id in DB. When Success append response in respective row's column. After that run ajax for next row and so on.

MY TRY

$('table tbody tr').each(function(){
   var tracking = $(this).attr('id');
  setInterval(function(){
   $.ajax({
      ...
      success: function(){ 
         //append here 
      }
   });
  }, 1000);

Problem

In this way when page load it create request for almost all rows and page stuck if record are too much.

is there any easy way to execute ajax one by one on each row?

Maby you can try jquery.queue() https://stackoverflow.com/questions/4785724/queue-ajax-requests-using-jquery-queue — Iiskaandar, Aug 19 '19 at 09:41
`is there any easy way to execute ajax one by one on each row?`, yes, do it in a loop, but note that ***it's a really bad idea***. In your example you would be making 300 requests to your server and flooding it, effectively getting your users to DDOS you. It would be a much better idea to retrieve the information necessary for all rows in a single request. — Rory McCrossan, Aug 19 '19 at 09:41
Also since you are using ajax, `setInterval` is trivial/unnecessary. — ambianBeing, Aug 19 '19 at 09:42
why not collect all the id's in an JSON array and then send a single request with that array and get another JSON array with all of their status s response? — A Rogue Otaku, Aug 19 '19 at 09:43

Udo E. · Accepted Answer · 2019-08-19T10:23:25.380

Ok, I'll love to give a practical method for doing this.

First, doing it the way you have it in the question will definitely stall the browser because you will be executing multiple asynchronous request at once. Most, browsers will issue a warning if this occurs.

Now, another way of doing this is including the next ajax call in your complete() callback and maintaining the data you are sending on each request in an array. I use a recursive function to achieve this

var tracker = [];

$('table tbody tr').each(function(){
    tracker.push($(this).attr('id'));
});

makeRequest(tracker);

function makeRequest(tracker) {
    $.ajax({
        // ajax settings
        data: {'id': tracker.pop()},
        success: function() {
            // use returned result here
        },
        complete: function() {
            if(tracker.length) {
                makeRequest(tracker);
            }
            else return;
        }
    });
}

Please, this is just experimental. Anyone that has suggestions or modifications can make them.

score 0 · Answer 2 · answered Aug 19 '19 at 09:46

Making hundreds requests to server to update status is not a good ideal. Your server will be overloaded and the client has to wait so long for the job.

Maybe you can try to make a new API, send an array of ID you wanna track to server and server will handle to check status of those IDs.

score 0 · Answer 3 · answered Aug 19 '19 at 09:57

"There are two ways, one is to use Jquery Datatables with server side scripting so it will create pagination for you automatically, second is to use your own script with a bit adding a logic in it, kindly see the below scenario, this is just an example."

$('table tbody tr').each(function(){
   var tracking = $(this).attr('id');
var lines=10;
  setInterval(function(){
   $.ajax({
type: "POST",
          data: {lines: lines },
          dataType: "json",
     // ...
      success: function(){ 
    lines=lines+10;
         //append here 
      }
   });
  }, 1000);

"On your query

$lines=$_POST['lines']; or as per your post method if you are using MVC definitely then use class methods

and in your query add $lines variable like this

mysqli_query($con,"SELECT * FROM table limit $lines,10"); //Here you will use $lines,10 where 10 are the no of records to show on each interval.

..Hope it will help you."

score 0 · Answer 4 · answered Aug 19 '19 at 14:44

Use async: false in ajax request

$.ajax({ // ajax settings data: {'id': tracker.pop()}, async: false, success: function() { // use returned result here }, complete: function() { if(tracker.length) { makeRequest(tracker); } else return; } });

Run Ajax request One by one on whole table

4 Answers4

Linked