CODEWITHSUNDEEP
javascriptjqueryajax
theking963
theking963

Reputation: 2216

Loading Indicator in Ajax

I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.

I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.

From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.

$(document).ready(function() { 
  $('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>'); 
});

$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

My page is structured like this

Header Page

-Div (display ajax here)

-Another div within the first loaded page(Load another page through ajax here)

I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.

Any help will be greatly appreciated.

Upvotes: 1

Views: 3250

Answers (3)

Jordan Brown
Jordan Brown

Reputation: 13883

Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself? 

<div id="main">
  <div id="ajaxBusy">
    <p><img src="ajax-loader.gif"></p>
  </div>
</div>

Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.

$('#ajaxBusy').ajaxStart(function(){ 
  $(this).show(); 
}).ajaxStop(function(){ 
  $(this).hide();
});

Upvotes: 0

Daff
Daff

Reputation: 44215

I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:

.ajax-loader {
    background: url(ajax-loader.gif) center center no-repeat;
}

Then you just add that class to the element you are loading and remove it when it is done:

    // Removes any loaded images on Ajax success
   var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
    {
        $('.ajax-loader').removeClass('ajax-loader');
    };

    // Add the ajax loader to a specific element and remove it when successful
    $('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);

Upvotes: 2

Romeo M.
Romeo M.

Reputation: 3278

considering that the div you want to load your image has an id="theDiv"

$(document).ready(function() { 
  $('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>'); 
});

Upvotes: 0

Related Questions