jQuery plugin to display "loading" while waiting for AJAX response.

Question

I am written some jQuery ajax code where I am sending a request to the server when a drop down option is changed. Based on this change 4 or 5 text fields change their data and bunch of new images get loaded. everything feels nifty.

But I was wondering if there was a plugin provided by jquery that would make the page dark...show 'loading' or spinner for a quick second until request comes back from the server? I remember seeing one around but am not able to find it.

Answer 1

There's two objects you can pass to the generic ajax object called ajaxStart and ajaxStop. These are event handlers which fire whenever an ajax query is sent and received.

ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

With that in mind, it's fairly easy to set up what you're after:

$("#loading").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

Just make your #loading div whatever you like - take a look at the numerous lightbox plugins or BlockUI to achieve something like what you asked.

Of course, you could set it to do whatever you like, but once that's set up at the top of your script, it's set-and-forget.

If you are using the BlockUI plugin, then all you have to do is this:

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

Answer 2

I would suggest using jQuery Ajax event methods ajaxStart() and ajaxComplete()

Documentation here under Ajax Events