jQuery $.each nested in $.When

Question

I have a list of itens to pass through a function that returns a $.ajax() but the .done is getting called after the $.each is called, not after the inners ajax calls complete! What should I do?!?

Here is my code:

$.when(
    $.each(data, function (index, item) {
        GetReservation(
            item.UniqueId,
            apiRoot,
            //this is the 'success' function
            function (data2) {
                //do my stuff
            },
            //this is the 'error' function
            function (x, y, z) {
                if (x.status == 404) {
                    //OK, no reservations!
                }
            });
    })
).done(setButtons(box, c));

this may be relevant [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Liam, Apr 10 '14 at 14:52
As far as I know; when you use `$.when` the all youre promises should be successfull for the `$.when` to return done. — TryingToImprove, Apr 10 '14 at 14:53
@Liam not really..It could be relevant but not really duplicate. — Deepak Ingole, Apr 10 '14 at 14:53
Look here: [Javascript callback for multiple ajax calls](http://stackoverflow.com/questions/4368946/javascript-callback-for-multiple-ajax-calls) — kevin628, Apr 10 '14 at 14:55

Rob M. · Accepted Answer · 2014-04-10T16:31:10.090

5

$.each is not returning an array of promises as your code seems to be expecting. You should build an array of promises first then call $.when with your array:

var promises = [];

$.each(data, function (index, item) {
    // add promise to array
    promises.push(GetReservation(
        item.UniqueId,
        apiRoot,
        //this is the 'success' function
        function (data2) {
            //do my stuff
        },
        //this is the 'error' function
        function (x, y, z) {
            if (x.status == 404) {
                //OK, no reservations!
            }
        }
    ));
})

$.when.apply($, promises).done(function(){
  setButtons(box, c)
});

edited Apr 10 '14 at 16:31

answered Apr 10 '14 at 14:56

Rob M.

35,491
6
51
50

problem persists... setButtons still getting called before GetReservation done... – Leonardo Apr 10 '14 at 16:30
I saw the problem immediately, setButtons was being invoked immediately and needed to be wrapped in a function. I've updated my example – Rob M. Apr 10 '14 at 16:31
Also, make sure your `GetReservation` function is returning the promise. – Rob M. Apr 10 '14 at 16:32
Without looking at more of your source code (specifically the `GetReservation` function, it's hard to say. Calling `$.when` in this manner will definitely work if you are using an array of promises, for example: `$.when.apply($, [$.get('example.html'), $.ajax({..})]).done(..)`. So assuming `GetReservation` is doing something like `return $.ajax(...)` it should be working. – Rob M. Apr 10 '14 at 16:56

jQuery $.each nested in $.When

1 Answers1