How to change cursor during jQuery synchronous browser blocking POST?
$.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 an active request, what's the most efficient way to change the cursor to an hourglass, or display a pending .gif?
Perhaps position the cursor when it enters this function and then change it to success or full function ?
Any advice is appreciated.
Thanks.
a source to share
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. The site has a lot of information on how to use it, but in its simplest form:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
This will automatically show the wait cursor and prevent user actions until the ajax call completes.
a source to share
I haven't tested this, but I think it would be done like this:
$('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');
}
});
As suggested by @patrick, he changed it to bug as well.
a source to share
Don't make the request synchronous because it blocks everything else entirely. You can use an asynchronous request instead, but make it look like a synchronous one by "blocking" the user interface. I am using jQuery.blockUI () for this.
a source to share