How do I find whether all ajax requests are completed and each request returned data from server to HTML using Javascript and/or JQuery?

Question

I need to perform some slideup and slidedown animations in my DOM (HTML page). The number of AJAX requests may vary in each page.

My question is, How do I know whether all AJAX requests in a page has completed and each request completed returning data from server to HTML?

Once I get this done, I can perform my animations after these things in DOM.

Answer 1

-- Updated after comment discussion --

I would fire all my ajax in the same section.

$.when(
    $.ajax(), // some ajax
    $.ajax() // some more ajax
    // etc etc for all
).then(function() {
    // play animations here
});

This way you fire them all at the start once they are all done the then will execute.

-- Old alternate Awnser --

I had a similar issue a while back have a read throught this:

Stoping jquery .then chain via user input .

Basicly you want to chain your ajax responses.

Also read up here: http://api.jquery.com/queue/

Answer 2

I am not sure this is what you are after but you can check how many AJAX calls are active using

$.active

so if there are none all AJAX calls have finished, and you can check here for more info.

And you could use the success and error properties of your AJAX calls to build in checks to ensure they are returning etc.

Answer 3

I suggest you to create a flag variable like say ajaxRequest = true and then change this variable to false whenever an ajax request is failed. Then do your things on behalf of this variable, like:

if(!!ajaxRequest){
  //if all the ajax are sucessfull.
}else{
  //if any of them fails.
}