I want to change the mouse pointer to the "Wait" symbol when we run the AJAX call and return back to default pointer after completing the call. I have tried as follows but my problem is it's just working on Firefox until I dont click/press the mouse button. Here is my code:
function initializeAjax(url){
$('html, body').css("cursor", "wait");
try {
if (url.substring(0,4) == ".mdf") {
var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf('.mdf'));
var url = database + url;
}
initRequest(url);
returnedValues = null;
req.onreadystatechange = returnedValues;
nocache = Math.random();
req.open("GET", url+"&nocache = "+nocache, false);
req.send(null);
$('html, body').css("cursor", "auto");
return req.responseText;
}
catch(err) {
return "Error 8";
}
}
Could anyone please help how to change above to solve the problem soo that it shud work in Firefox and IE too.
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;
}