1

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.

Community
  • 1
  • 1
ContextSwitch
  • 2,830
  • 6
  • 35
  • 51
  • I don't have an answer, but something you might want to take note of -> http://blog.jqueryui.com/2011/09/jquery-ui-1-9-milestone-6-spinner-2/ – SpYk3HH Mar 21 '12 at 20:40
  • The reason it does that is because you're allowing for multiple ajax calls to be handled at any given time. By declaring 'async: true', the next ajax request will have to wait to load until the first has ended. this should stop the issue with your functionality and shouldn't cause any problems unless the data returned by that ajax function is huge. – Ohgodwhy Mar 21 '12 at 20:42
  • I think async:true is the default. I tried setting it to false but it seems to lock up the browser – ContextSwitch Mar 21 '12 at 20:50
  • Also, it looks like the jquery-ui spinner is for input fields so that you can increase or decrease integers using the mouse, not a page loader, thanks though – ContextSwitch Mar 21 '12 at 20:57
  • Use a customEvent for triggering the recurring AJAX call and add the logic in ajaxStart() and ajaxStop() functions to check for the event. Hope this will solve the problem – Raghav Mar 21 '12 at 21:11
  • I've tried using a custom event and also maintaining a global variable that keeps track of if I should show it or not. This works better than my other solutions but the spinner still doesn't show up sometimes when its supposed to – ContextSwitch Mar 22 '12 at 13:49

1 Answers1

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.

Community
  • 1
  • 1
Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148
  • That seems like exactly what I need, but the settings object doesn't appear to be sent into the ajaxStart call. Here is ajaxStart: http://jsfiddle.net/RjmSx/7/ compared to ajaxError: http://jsfiddle.net/RjmSx/8/ – ContextSwitch Mar 22 '12 at 20:12
  • I ended up using ajaxSend instead of ajaxStart, that fixed it, Thanks! – ContextSwitch Mar 23 '12 at 13:52