how to write event driven code that waits for the responses of 3 different ajax requests?

Question

I have a webpage where I have 3 separate ajax calls

All 3 use the same structure: $.ajax({ //this is the php file that processes the data and send mail url: url,

        //POST method is used
        type: "POST",

        //pass the data         
        data: data,     

        //Do not cache the page
        cache: false,

        //success
        success: function (json) {

I want to trigger another function but only if the 3 separate ajax calls are successful.

How do I go about doing that?

Update: I now have an issue when using $.when()

My code now looks like this:

function mainFunction() {
    $.when(someAjaxCall()).done(function(ajaxResult){
            // after all the pages, covers, and sneaks are uploaded
            // we will now change the status
            //start the ajax
            console.log(ajaxResult);
}

function someAjaxCall() {
    // do something...
    if (someGlobalScopedVariable == true) {
         return $.ajax({
        //this is the php file that processes the data and send mail
        url: url,

        //POST method is used
        type: "POST",

        //pass the data         
        data: data,     

        //Do not cache the page
        cache: false,

        //success
        success: function (json) {....},
     });
    }
}

The ajaxResult inside the mainFunction $.when gives me undefined. Did I do something wrong because i followed this http://api.jquery.com/jQuery.when/

maybe it's duplicate with http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-request-are-done — James from CppDepend Team, Oct 05 '12 at 22:58

score 8 · Accepted Answer · edited Oct 06 '12 at 00:26

8

Use jQuery.when.

var deferred1 = $.ajax({ ... });
var deferred2 = $.ajax({ ... });
var deferred3 = $.ajax({ ... });

$.when(deferred1, deferred2, deferred3).then(
    function(info1, info2, info3) {
        var response1 = info1[0], response2 = info2[0], response3 = info3[0];
        // Do something with response 1, 2, and 3...
    }
);

$.ajax returns a Deferred object. You can pass several Deferred objects to $.when in order to wait for all of them to complete.

edited Oct 06 '12 at 00:26

saml

6,702
1
34
30

answered Oct 05 '12 at 22:54

Nathan Wall

10,530
4
24
47

Thank you for your answer.. but i wrapped my ajax calls within javascript functions. see above for update. So it is causing some issues. I need to wrap my ajax calls because i need to do some other logic BEFORE running those separate ajax calls. I can certainly put everything in 1 giant function but it looks very ugly. Anyway I can maintain separation of concerns while still using jquery.when? – Kim Stacks Oct 06 '12 at 13:42
Does `someAjaxCall()` always `return $.ajax(...)`? Or does it sometimes just exit without returning anything? You might need: `var result = someAjaxCall(); if(result) $.when(result).done(...);` – Nathan Wall Oct 06 '12 at 13:58
I ran this little test in my console while on the StackOverflow website, and it works fine: `var a = $.ajax({ url: '/', success: function(A) { console.log('success', String(A).substring(0, 50)); } }); $.when(a).done(function(A) { console.log('when', String(A).substring(0, 50)); });` . Try it out yourself to confirm `$.when` acts as expected. Then your job is to figure out what's different about your implementation. – Nathan Wall Oct 06 '12 at 14:00
thank you. i finally got it to work. i think further down i need more refactoring.. for now it is good enough. i have nested quite abit of when then, when then, when then almost 4 levels down.. – Kim Stacks Oct 06 '12 at 17:35

how to write event driven code that waits for the responses of 3 different ajax requests?

1 Answers1