CODEWITHSUNDEEP
javascriptjquery
Queso
Queso

Reputation: 967

Cursor change doesn't happen as expected in Javascript/JQuery page

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?

Upvotes: 1

Views: 1893

Answers (3)

bobince
bobince

Reputation: 536359

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.

Upvotes: 0

Kammy
Kammy

Reputation: 431

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.

Upvotes: 1

trrrrrrm
trrrrrrm

Reputation: 11812

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');
                     }
           });
     });

});

Upvotes: 0

Related Questions