I have a site that have synchronous and asynchronous activities going on, when a user clicks a button the first thing the onclick method does is:
$('body').css('cursor','wait');
and before the method returns I call
$('body').css('cursor','auto');
The cursor only flashes the change towards the return of the method. Does anyone have an idea as to why the cursor isn't changed immediately upon the method invocation?
Above one will surely work. I think showing cursor:wait; is not good idea. It would be better to see if you show some ajax loading image.
I have a site that have synchronous and asynchronous activities going on
Not really. If there is just one synchronous activity going on, there are no asynchronous events being fired, the whole browser UI will be blocked, and the mouse pointer won't update.
You must return control to the browser to allow it to change the mouse pointer after a style change. You could try putting the synchronous code on a setTimeout after you've updated the cursor style, so that the update was effective before the UI hangs up on your synchronous operation. But really the proper, user-friendly approach is to make everything asynchronous.
if you are using Jquery.ajax in that button click you need to set your cursor as auto when the ajax finishes
for example
$(function(){
$('#button ID'.click(function(){
$('body').css('cursor','wait');
$.ajax({
url: "test.html",
complete: function(){
$('body').css('cursor','auto');
}
});
});
});
