JQuery – Wait for multiple AJAX calls to return before continuing

I have to say, I love JQuery. Before 2 years ago, I was a complete and utter JavaScript noob, and quite frankly I feared it. But when I began getting to grips with this gem of a JavaScript framework, my eyes opened up to an entirely new world!

Ok, enough gushing and onto my discovery. I have a website that currently makes multiple ajax calls to retrieve a bunch of lookup lists etc. Before I can setup a grid I have on the page, which makes use of these lookup lists, I need to wait for all these calls to return before I can initialize my grid with the data. Enter JQuery’s when, then concept. This is only available from JQuery 1.5 onwards.

function getLookupListOne(){
    return $.get('lookup-list-one-url.json', function(data){
    for(var i = 0; i < data.length; i++){
        lookupListArrayOne[i] = "Some global array data you might want to initialize...";
    }
});

function getLookupListTwo(){
    // Content left out for brevity
});

function getLookupListThree(){
    // Content left out for brevity
});

$(document).ready(function() {
    $.when(
        getLookupListOne(),
        getLookupListTwo(),
        getLookupListThree()
    ).then(function(){
        alert('All AJAX Methods Have Completed!');
    )};
});