I am making two ajax call asynchronously, on each call I am showing a loading dialog box like this,

jQuery('#msg_writter').show();

on success of each request I will hide the loading dialog like this,

jQuery('#msg_writter').fadeOut(1000);

my html code for loading dialog:

<div id="msg_writter" class="msgWritter">    
     <img src="/images/loading.gif"/>
</div>

when the first request is done, the loading dialog gets disappear so loading dialog is not showing for the second request.

How could I modify the code to show the loading dialog from the first request till the success of last request.

I am making two ajax call asynchronously, on each call I am showing a loading dialog box like this,

jQuery('#msg_writter').show();

on success of each request I will hide the loading dialog like this,

jQuery('#msg_writter').fadeOut(1000);

my html code for loading dialog:

<div id="msg_writter" class="msgWritter">    
     <img src="/images/loading.gif"/>
</div>

when the first request is done, the loading dialog gets disappear so loading dialog is not showing for the second request.

How could I modify the code to show the loading dialog from the first request till the success of last request.

• javascript
• jquery
• ajax

• show your ajax call code – M Khalid Junaid Commented Sep 18, 2013 at 8:03
• I show the loading dialog two time first on by default of html itself and second from a ajax request from a javascript file, this request will called before document ready function. I hide the loading dialog two time, first on document ready function and second on ajax request success. – Arivarasan L Commented Sep 18, 2013 at 8:24

4 Answers 4

You must count AJAX request counts:

var activeAjaxCount = 0;

// When making request, increment count and show loader
activeAjaxCount++;
jQuery('#msg_writter').show();

// On plete callback, decrease count and fadeout loader if count is zero
activeAjaxCount--;
if (activeAjaxCount == 0) {
    jQuery('#msg_writter').fadeOut(1000);
}

You can also use $.ajaxStart and $.ajaxComplete to solve that globally.

var activeAjaxCount = 0;

$( document ).ajaxStart(function() {
    activeAjaxCount++;
    $('#msg_writter').show();
});

$( document ).ajaxComplete(function() {
    activeAjaxCount--;
    if (activeAjaxCount == 0) {
        jQuery('#msg_writter').fadeOut(1000);
    }
});

Use deferred:

jQuery('#msg_writter').show();
var a = $.ajax(...);
var b = $.ajax(...); // the other call
$.when(a,b).always(function() {
    jQuery('#msg_writter').fadeOut(1000);
});

You can do:

var test1 = false;
var test2 = false;

var onSuccessAjax1 = function () {
    test1 = true;
    if (test1 && test2) {
        //hide loading animation
    }
}

var onSuccessAjax2 = function () {
    test2 = true;
    if (test1 && test2) {
        //hide loading animation
    }
}

you have to call the onSuccessAjax functions when your ajax call terminate with success

i know this is a very old question but i didn't find any simple and effective solution anywhere so i searched more and found out that jquery provides .ajaxStop() function specifically for this purpose here's the link of the documentation https://api.jquery./ajaxstop/