Change the wait cursor to default (auto) after the ajax call is complete using AjaxStop event (in Chrome)

Question

I ran into this problem and from some google search I realized that this is probably a bug in Chrome and Safari browsers.

When I submit a form (basically , make an ajax call) the default cursor changes to wait cursor (hourglass) and when the ajax call is complete ( response ) the cursor changes to the default type (arrow). However, this only works well in IE and FF. In Chrome, the cursor still remains to be hourglass cursor until I do something like move the cursor or have an alert etc.

I tried a solution much like the one mentioned here which uses the Jquery's Ajax Stop and Start event to trigger actions but for some reason it doesn't work for me.

Below is my 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 wrong ? The solution as mentioned in the article seems pretty straight foward to me but doesn't work. Thanks much for any advise.

Answer 1

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

As such, with just the tiniest change (that is, 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');
        });
});