Change Mouse pointer when ajax call

As of jQuery 1.9, this is how this can be done:

$(document).ajaxStart(function (){    $('body').addClass('wait');}).ajaxComplete(function () {    $('body').removeClass('wait');});

CSS

body.wait *, body.wait{    cursor: progress !important;}

Have a look at the jQuery get method. It's very simple to use and handles callback as well, so you'll have no problem adding the code to set the mouse cursor back...

http://api.jquery.com/jQuery.get/

Example...

$('html, body').css("cursor", "wait");$.get("yourajaxcall.url", function(data) {    $('html, body').css("cursor", "auto");    //  Success - do something with "data" here}).error(function() {    $('html, body').css("cursor", "auto");    //  There was an error - do something else});

This post here has a great solution for the problem.

Here's his solution:

function globalAjaxCursorChange() {  $("html").bind("ajaxStart", function(){     $(this).addClass('busy');  }).bind("ajaxStop", function(){     $(this).removeClass('busy');  });}

And then in the CSS:

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

I like the CSS approach and toggling a class rather than actually changing the CSS in the Javascript. Seems like a cleaner approach to me.

To apply this to your code specifically, you would change the Javascript that is trying to change the cursor to just $(this).addClass('busy'); then when you want to change the cursor back just call $(this).removeClass('busy');