I have some ajax calls on the document of a site that display or hide a progress bar depending on the ajax status
$(document).ajaxStart(function(){
I have a solution. I set a global js variable called showloader (set as false by default). In any of the functions that you want to show the loader just set it to true before you make the ajax call.
function doAjaxThing()
{
showloader=true;
$.ajax({yaddayadda});
}
Then I have the following in my head section;
$(document).ajaxStart(function()
{
if (showloader)
{
$('.loadingholder').fadeIn(200);
}
});
$(document).ajaxComplete(function()
{
$('.loadingholder').fadeOut(200);
showloader=false;
});