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/

Answer 1

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.