Question

I have an ajax loader much like this one:

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        if(showSpinner == true){
            $(this).show();
        }
        else{
            showSpinner = true;
        }
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

from: How to show loading spinner in jQuery?

edited after updates

I initialize showSpinner = true, and set it to false immediately before my recurring ajax call. It works most of the time but sometimes the spinner won’t show up when its supposed to. I’ve polled the value of showSpinner and it looks like it remains false for too long between when its set and when it’s set back to true.

It works wonderfully, but I also have a recurring ajax call that is executed every 15 seconds, and I don’t want the ajax loader to appear for that one. I’ve tried this:

showSpinner = false;

// make ajax call to the database to check for new photos
$.ajax('/url', {
    type:"post",
    data: data,
    success: function(response){
    }
});  

and it will prevent the spinner from appearing, but sometimes it disables the spinner for the other ajax calls too (other times it works fine). I’ve tried moving the re-enabling of the spinner to beforeSend but it didn’t help. When the setInterval call that executes the code above is removed, it fixes the problem.

My other option is to include the spinner every place an ajax call occurs, but I’d prefer the more generic solution. Does anyone know how to get around this?

Thanks.

Answer 1

This sounds very similar, if not identical, to my own question about disabling certain ajax event handlers. This answer may be useful to you.