Question

I have given a loading image binded to ajax start/stop functions like this..

$('#LoadingImage').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){ 
    $(this).hide();
});

Now i have many ajax calls on my page under document.ready().so all ajax calls start at the same time..but ajax stop varies according to the results in the ajax..so what happens is

loading image appears and when one ajax call is complete the image is hidden and shows my main screen.. Is there a way to loading image till the final ajax call is complete ???

<script type="text/javascript">

$(document).ready(function () {

$('#LoadingImage').on('ajaxStart', function(){
        $(this).show();
}).on('ajaxStop', function(){   
        $(this).hide();

});

$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

        }); // end $.ajax 


$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 
$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 
$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 

$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 

Like the above i have many ajax calls…The problem is that after the first ajax is complete the image hides..

Answer 1

You can set up one variable which increments on Ajax start and decrements on Ajax complete.
Inside the ajaxStop function check whether this variable is 0 or not.If zero then only hide the image.

Do like this,

$(document).ready(function () {
  var count=0;
  $('#LoadingImage').on('ajaxStart', function(){
      count++;
     if(count===1){
         $(this).show();
     }
  }).on('ajaxStop', function(){
     //count is decrementing and on same time checking whether it becomes zero
     if(!--count){
       $(this).hide();
     }
  });

  //suppose 10 simultanious ajax calls
  for(var j=0;j<10;j++){
     $.ajax({
     //configure whatever you want
     });   
  }
});

this should work (theoretically).