how to call a function after a set of multiple ajax request complete on jquery?

Question

I am calling multiple ajax requests at a time. I have a single function which calls the server and gets the response and processes it. Based on the parameters passed to it, I will decide what to be returned on the server side.

I want to call a function once all the ajax requests are complete as each would take different timespan depending on various aspects.

I tied jQuery http://api.jquery.com/jQuery.when/ but the function in the .then() gets called immediately.

Here is what I tried :

$.when(GetAjaxData(someUrl1), GetAjaxData(someUrl2), GetAjaxData(someUrl3)).then(alert("done"), alert("not done"));

is there any other approach that you can think of?

I want to call the function once all the ajax request have returned the result and the processing is done. the processing will be taken care in the function called through $.ajax()'s success: — Amit, Mar 07 '11 at 19:43

score 2 · Accepted Answer · answered Oct 24 '11 at 20:36

Little known fact, $.when() will execute the then() callback immediately if any one of the parameters fails. To quote the documentation:

http://api.jquery.com/jQuery.when/

In the multiple-Deferreds case where one of the Deferreds is rejected, jQuery.when immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. If you need to perform additional processing for this case, such as canceling any unfinished ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.

There's actually no built-in way of waiting until all of them are finished regardless of their success/failure status.

So, I built a $.whenAll() for you :)

http://jsfiddle.net/InfinitiesLoop/yQsYK/

> There's actually no built-in way of waiting until all of them are finished regardless of their success/failure status. That's no longer the case (see my answer) — Eugene Yarmash, Oct 10 '14 at 15:17

score 0 · Answer 2 · answered Oct 10 '14 at 15:14

0

You want deferred.always():

// Called when all deferreds are either resolved or rejected
$.when(
    $.ajax("/page1.php"),
    $.ajax("/page2.php"),
    $.ajax("/page3.php"))
.always(function() { alert("AJAX requests completed") });

answered Oct 10 '14 at 15:14

Eugene Yarmash

142,882
41
325
378

I don't think this solves OP's problem. `.always()` will get "prematurely" because of the way `$.when()` works. It wraps all of the requests with a "master promise". The second one of those fails, it rejects the master promise which immediately triggers all the failCallbacks, which includes `.always()` without evaluating the remaining requests. For example if OP's 2nd request fails, requests 3 and 4 don't ever get evaluated. It isn't 100% accurate to say that all 4 requests completed. See: http://stackoverflow.com/questions/19177087/deferred-how-to-detect-when-every-promise-has-been-executed – Joel Kinzel Jun 21 '16 at 23:11

score 0 · Answer 3 · edited Jan 29 '16 at 10:52

0

$(document).ajaxStop(function () {
    // or call the function which you want to call after all the ajax calls
});

edited Jan 29 '16 at 10:52

Tunaki

132,869
46
340
423

answered Jan 29 '16 at 10:51

Sharmistha Chinara

1

This registers a handler that is called when *all* Ajax requests are complete, not just those in a defined list. – twernt Jan 29 '16 at 15:18

score 0 · Answer 4 · answered Mar 07 '11 at 19:41

0

jQuery.when only works when a jQuery.Deferred object is returned, so in your GetAjaxData function, you want to return the jqXHR object (which is a Deferred).

Something like this:

function GetAjaxData(url) {
    return $.ajax({
        url: url,
        ... more options
    })
}

This will execute the AJAX request and return the jqXHR object, which jQuery.when knows how to use.

answered Mar 07 '11 at 19:41

Intelekshual

7,444
1
21
28

so u mean to say i can not wrap the ajax call in some other function and call when on that is it? – Amit Mar 07 '11 at 19:44
No, you can, you just need to return the jqXHR object. See the code example in my answer. – Intelekshual Mar 07 '11 at 19:46
Is there any more code you can show us? Are you using the latest version of jQuery? – Intelekshual Mar 07 '11 at 19:54
i am using jquery 1.5. Acually there is nothing much in the code to share.. i am calling the same function as mentioned above with some parameter and the function takes care of making the ajax request. i added a return statement to $.ajax() as u mentioned. – Amit Mar 08 '11 at 20:18

how to call a function after a set of multiple ajax request complete on jquery?

4 Answers4