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:

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 orBlockUI 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);

 

原文出處: http://stackoverflow.com/questions/1408728/jquery-plugin-to-display-loading-while-waiting-for-ajax-response

JQuery BlockUI 參考網址 http://malsup.com/jquery/block/#overview


創作者介紹

經驗交流分享與備忘

Frank 發表在 痞客邦 PIXNET 留言(0) 人氣()