$.ajax({
       url: "/cgi-bin/stats.exe",
       method: "post",
       async: false,
       data: { refresh: "a41" }
   });

Using ajax post synchronously - "async: false".

While it blocks the browser during the active request, what is the most efficient way to change the cursor to the hourglass or display a wait .gif?

Perhaps set the cursor as it enters this function then change it back in the success or plete function?

Any advice is appreciated.

Thank You.

   $.ajax({
       url: "/cgi-bin/stats.exe",
       method: "post",
       async: false,
       data: { refresh: "a41" }
   });

Using ajax post synchronously - "async: false".

While it blocks the browser during the active request, what is the most efficient way to change the cursor to the hourglass or display a wait .gif?

Perhaps set the cursor as it enters this function then change it back in the success or plete function?

Any advice is appreciated.

Thank You.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 21, 2010 at 19:47 Matt Ball 360k102102 gold badges653653 silver badges720720 bronze badges asked Apr 21, 2010 at 18:57 T.T.T.T.T.T. 34.7k4747 gold badges135135 silver badges172172 bronze badges 1

• Remove the async: false line and then do as Hooray suggested. – Rosdi Kasim Commented Apr 22, 2010 at 1:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I haven't tested this, but I think it would be done like so:

$('html, body').css('cursor', 'wait');

$.ajax({
   url: "/cgi-bin/stats.exe",
   method: "post",
   async: false,
   data: { refresh: "a41" },
   success: function() {
     $('html, body').css('cursor', 'auto');
     // the rest of your processing here
   },
   error: function() {
     $('html, body').css('cursor', 'auto');
   }
});

Per @patrick's suggestion, changed it back on error as well.

Don't make the request synchronous because it will totally block everything else. Instead, you can use an asynchronous request, but make it look like it's synchronous by "blocking" the UI. I use jQuery.blockUI() for this.

I remend using the jQuery blockUI plug-in. It will change the cursor, show any message or icon (http://ajaxload.info/) you like while the user is waiting. There's lots of info on the website for how to use it, but in its simplest form:

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

That will automatically show the wait cursor and prevent user activities until the ajax call pletes.