Add a loading graphic jquery

Question

I am using the jquery ajax api so load in some content, the code looks like this,

$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM
   }

});

In my HTML i have <div id="loading">Loading Content</div> this is has a css style on it of display:none, while my ajax is bring in the content I want to show the div that is hidden, but I cant find a away too have tried attaching .ajaxStart on my loading div then doing show() but that did not work.

Any advice?

Answer 1

Do something like this:

$("#loading").show();
$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM
       $("#loading").hide();
   }
});

You may also want to hide the div in case of an error. You can also experiment with fadeIn and fadeOut for some nice effects.

Answer 2

$("#loading").show(); // show the div before the ajax call

$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM

       $("#loading").hide(); //hide the loading div in callback function
   },
   error: function(){
       // error callback routine
       $("#loading").hide(); //hide the loading div in callback function
   }
});    

Answer 3

$("#loading").show();
$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM
       $("#loading").fadeOut();
   }
});

You've to put $("#loading").hide(); in you're script asswell for not showing the loading div when AJAX is not triggerd

//EDIT

ah nevermind you got in your style display: none;