Change the wait cursor to the default value (automatically) after the end of the ajax call using the AjaxStop event (in Chrome)

Question

I ran into this problem, and from some Google searches, I realized that this is probably a bug in Chrome and Safari browsers.

When I submit the form (basically, I make an ajax call), the default cursor changes the wait cursor (hourglass), and when the ajax call is completed (answer), the cursor changes to the default type (arrow). However, this only works in IE and FF. In Chrome, the cursor still remains the hourglass cursor until I do something like moving the cursor or warning, etc.

I tried a solution similar to the one mentioned here , which uses the JQuery Ajax Stop and Start event to trigger actions, but for some reason this does not work for me.

Below is the jsp / html code.

function SubmitForm() { globalAjaxCursorChange(); // some code to make Ajax call } function globalAjaxCursorChange() { $("html").bind("ajaxStart", function(){ $(this).addClass('busy'); }).bind("ajaxStop", function(){ $(this).removeClass('busy'); }); } 

And this is my CSS code.

 html.busy, html.busy * { cursor: wait !important; } 

What am I missing or where am I mistaken? The solution mentioned in the article seems pretty frank to me, but doesn't work. Thanks so much for any advice.

Answer 1

I'm not sure why the .bind options did not work, but when I googled for "jquery bind ajaxStart", this was the first search result.

Thus, with a minimal change (i.e. changing .bind("ajaxStart", to .ajaxStart( and the same with ajaxStop )), I got your code to work as shown below:

 $(document).ready(function() { // Global ajax cursor change $("html") .ajaxStart(function () { $(this).addClass('busy'); }) .ajaxStop(function () { $(this).removeClass('busy'); }); }); 

Answer 2

With jquery 1.9 you have to attach them to the document .

 // Makes the mousecursor show busy during ajax // $( document ) .ajaxStart( function startBusy() { $( 'html' ).addClass ( 'busy' ) } ) .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )