How To Check Completion Of Multiple Ajax Requests?

I'm executing multiple(3) ajax requests. How can I check whether all of them have returned successfully, and only after then do something with the output. I thought about chaining

Solution 1:

$.when(function(){// THIS TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true',
  success: function(output) {

    $('#bookingTableThis').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableThis').html(output);
    });

  }

});


// PREV TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=prev',
  success: function(output) {

    $('#bookingTablePrev').animate({
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTablePrev').html(output);  
    });

  }
});


// NEXT TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=next',
  success: function(output) {

    $('#bookingTableNext').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableNext').html(output);
    });

  }

});
}).then(function(){
    alert('all of them were done');

});

Solution 2:

For the benifit of those who come here in 2012, I found that the syntax of the above answer has been changed to something like the below

$.when(
        $.ajax({
            type: 'GET',
            url: '/api/data/jobtypes',
            dataType: "json",
            success: loadJobTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/servicetypes',
            dataType: "json",
            success: loadServiceTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/approvaltypes',
            dataType: "json",
            success: loadApprovalTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/customertypes',
            dataType: "json",
            success: loadCustomerTypes
        }) 

    ).done(function(){

        alert("all done");
    }); 

Solution 3:

pre-initialize a 3-element global array, then store the results in the array. when the array is fully populated, update the page.