How do I change the cursor during a jQuery synchronous browser blocking POST?

Question

   $.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 complete function?

Any advice is appreciated.

Thank You.

Answer 1

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.

Answer 2

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.

Answer 3

I recommend 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 completes.