Question

I am working on an PHP application that uses ajax to load components within a page. More importantly, these modules/components are suppose to load in a sequence such that if a previous load fails, the ones that follow will also fail.

In other words, the Page loads, makes an ajax call and receives a json encoded response. If the response was “SUCCESS”, it makes the second call and receives another json response. Again, if the second response was “SUCCESS”, it makes the 3rd call and so on. This is suppose to happen about 8 times at which point the page is considered completely loaded.

If during this load, say the 3rd request receives a response “FAIL”, the requests from 4-8 are abandoned and an error message is thrown.

The way I am achieving this right now is by making the first call, wait for response and make the second call from within the first call.

To put this in reference, here is part of the code:

$.get(WEB_ROOT+'/process/createKeywords', {}, function(keywordsResponse) {
    $('#createKeywords').parent().children(0).children(0).hide();
    if (keywordsResponse.RESPONSE == "SUCCESS") {
        $('#createKeywords').html(img);
        $('#getTraffic').parent().children(0).children(0).show();

        $.get(WEB_ROOT+'/process/getTraffic', {}, function(trafficResponse) {
            $('#getTraffic').parent().children(0).children(0).hide();
            if (trafficResponse.RESPONSE == "SUCCESS") {
                $('#getTraffic').html(img);
                $('#getGoogleResults').parent().children(0).children(0).show();

                $.get(WEB_ROOT+'/process/getGoogleResults', {}, function(googleScrapeResponse) {
                    $('#getGoogleResults').parent().children(0).children(0).hide();
                    if (googleScrapeResponse.RESPONSE == "SUCCESS") {
                        $('#getGoogleResults').html(img);
                        $('#resortResults').parent().children(0).children(0).show();

As you can imagine this can get complicated and ugly pretty fast. Does anyone have any suggestions on how I can acomplish something like this?

Answer 1

//setup an object to store the necessary info for each AJAX call
var setup = [
    {
        url      : WEB_ROOT + '/process/createKeywords',

        //the callback will be run before the next AJAX request is made
        callback : function (keywordsResponse) {
            $('#createKeywords').parent().children(0).children(0).hide();
            if (keywordsResponse.RESPONSE == "SUCCESS") {
                $('#createKeywords').html(img);
                $('#getTraffic').parent().children(0).children(0).show();
            }
        }
    },
    {
        url      : WEB_ROOT + '/process/getTraffic',
        callback : function () {
            $('#getTraffic').parent().children(0).children(0).hide();
            if (trafficResponse.RESPONSE == "SUCCESS") {
                $('#getTraffic').html(img);
                $('#getGoogleResults').parent().children(0).children(0).show();
            }
        }
    }
];

//setup a function that recursively calls itself when the current AJAX request comes back successfully
function doAJAX(index) {
    var val = setup[index];
    $.getJSON(val.url, function (serverResponse) {

        //run the specified callback for this AJAX request
        val.callback(serverResponse);

        //now check if the response is "SUCCESS" and make sure that another AJAX request exists in the `setup` object
        if (serverResponse.RESPONSE == 'SUCCESS' && typeof setup[(index + 1)] != 'undefined') {

            //since the last AJAX request was a success and there is another one set, run it now
            doAJAX(index + 1);
        }
    });
}

//run the first AJAX request by passing in zero (index)
doAJAX(0);

This just allows you to setup the necessary variables for your consecutive AJAX requests. The callback associated with each url will run before the next AJAX request is run.