Using AJAX to do a set of sequential tasks on PHP server

Question

I'm having an issue with the inherent asynchronous-ness of AJAX with what I'm trying to accomplish...

Using a file upload form, I'm trying to send a set of data to my LAMP server which then loops through each subset of the data and generates a PDF for each subset. This takes a good 2 minutes or so to process all of the PDFs since there are so many (like 100) being generated for each subset of data.

I am hoping to use JavaScript/jQuery to segment the data into subsets that I will post to the server one at a time, and as each PDF is generated, get a response from the server and increment a progress bar, then send the next request.

How would you accomplish this in a loop? What's below doesn't work because jQuery doesn't care about the state of the server and sends all requests asynchronously.

var i = 0;
$.each(data_stuff, function(key, value) {
    $.post( window.location.href, { 
        stuff: key,
        data: value
    }).done(function( data ) {
        if (data == 1) {
            $('div#counter').text(i);
        }
    });                         
    $i++;
});

Thanks!

I would recommend using Promises. The following link is a good introduction: scotch.io/tutorials/javascript-promises-for-dummies (And it's not just for dummies!) In particular, check out the Chaining Promises section. — nb1987
– nb1987, Commented Apr 12, 2017 at 0:07
So which way are you trying to do. Do something after ALL ajax have finished, or, one ajax starts after another has finished? — A. L
– A. L, Commented Apr 12, 2017 at 0:08
one approach is to send all the data at once and have server side script update progress in session variable....then set up another long polling ajax call to monitor progress from that session variable — charlietfl
– charlietfl, Commented Apr 12, 2017 at 0:22
@A.Lau I'm trying to do one AJAX call after another, waiting for the previous one to finish before calling the next. And setting jQuery to synchronous mode just freezes the browser. — Nick
– Nick, Commented Apr 12, 2017 at 0:23

Bart Langelaan · Accepted Answer · 2017-04-12 01:00:28Z

Assuming data_stuff is an Object, you can try this:

var i = 0;

// We need an array (not object) to loop trough all the posts. 
// This saves all keys that are in the object:
var keys = Object.keys(data_stuff);

function postNext() {

    // For every POST request, we want to get the key and the value:
    var key = keys[i];
    var value = data_stuff[key];

    $.post( window.location.href, { 
        stuff: key,
        data: value
    }).done(function( data ) {
        if (data == 1) {
            $('div#counter').text(i);
        }

        // Increment i for the next post
        i++;

        // If it's the last post, run postsDone
        if(i == keys.length) {
            postsDone();
        }
        // Else, run the function again:
        else {
            postNext();
        }
    });
});

postNext();

function postsDone() {
    // All data was posted
}

This will only post the next bit of data_stuff after the previous $.post was done.

Collectives™ on Stack Overflow

Using AJAX to do a set of sequential tasks on PHP server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related