Execute function after all ajax .load() requests are finished

Question

I have a page that has a tab set. Each of the tabs is loaded by the jQuery .load() function.

I want to display a loading animation that disappears when all of the ajax requests are finished. However, document.ready() has only provided me with limited success.

How can I ensure that all ajax requests are completed before executing the code to hide the loading animation?

Answer 1

.ajaxStop(handler)

Documentation here: http://api.jquery.com/ajaxStop/

Answer 2

$(document).ready(function () {
     $(document).ajaxComplete(function () {
         alert('Completed');
     });
});

Answer 3

ajaxComplete

Per the documentation:

$('.log').ajaxComplete(function() {
    $(this).text('Triggered ajaxComplete handler.');
});

Answer 4

Use the callback argument to .load(), setting a flag or increasing a counter in the callback function. Once all flags are set or the counter reaches the number of tabs, you know all tabs have been loaded, and you can remove the animation.

In pseudocode that might or might not be valid JavaScript:

loadedTabs = 0;

function onLoad() {
    for (int i = 0; i < numTabs; ++i) {
        tabs[i].load(tabUrl(i), tabLoaded);
    }
}

function tabLoaded() {
    ++loadedTabs;
    if (loadedTabs == numTabs)
        loadingAnimation.display = 'none';
}

Answer 5

Basically, I have almost similar of this issue, which I want to load a Grid after completing load 2 combo boxes and at the end I want to load a grid, so I solved like that

    function LoadDropbox1()
    {
        //ajax1 load first dropbox
    }

    function LoadDropbox2()
    {
        //ajax2 load Second dropbox
    }

    function LoadGrid()
    {
        //ajax3 load Grid after complete the two drops loading...
    }

    $(document).ready(function () {
        LoadDropbox1();
        LoadDropbox2();
    });

    var Executed = false;

    jQuery(function ($) {
        $(document).ajaxStop(function () {
            // Executed when all ajax requests are done.
            if (!Executed) LoadGrid();
            Executed = true;
        });
    });

Answer 6

Look at this post and answers... https://stackoverflow.com/a/13090589/999958

A useful workaround for me: Look at ajaxCallComplete() call in each .complete(...);

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { ajaxCallComplete(); });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { ajaxCallComplete(); });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { ajaxCallComplete(); });
};

Hope can help...

Answer 7

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    $modal.show();
    $overlay.show();
}

function EndRequestHandler(sender, args) {
    $modal.hide();
    $overlay.hide();

}