Change Mouse pointer when ajax call

Question

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.

Answer 1

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

Answer 2

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

});

Answer 3

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

Answer 4

Simple and easy solution, just add the following code to each page you want to be affected:

$(document).ajaxStart(function(){ 
    $("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){ 
    $("body").removeClass('ajaxLoading');
});

And the CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

Of course, you can change this according to your needs, but for a simple effective way to display a loading cursor on every ajax call, this is the way to go (Or at least, the way I would do it).

Answer 5

None of the answers provided here on Stack Overflow would work for me. I'm using the latest and greatest FireFox for development and others here use IE, Chrome, etc.... Every time I made a call to jQuery's AJAX nothing would happen and ONLY when the AJAX call came back - would the cursor change. Then it would be stuck in the wait cursor. So - the call is made, the server returned the new information, the information was displayed and then WHAM! Wait cursor displays and won't go away. I tried ALL of the answers given. The .ajaxXXXX stuff were being called. (I put an ALERT("HERE"); into the functions and those "HERE"'s showed up all of the time. Every single call. Very depressing.

So I went "Ok - new stuff doesn't work. What about going old school?" I know it is clunky to do so - but this isn't some great big program I'm working on. It's just a little editor so several people can edit our database at the same time. Never going to see the light of the internet. Only the intranet. :-) Anyway, this works and works terrifically. You need to provide your own wait cursor. I just grabbed one off of Google Images to use.

First - the HTML:

<div id='wait' name='wait'
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'>
<table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%;'><tbody>
<tr><td style='width:100%;height:50%;'> </td></tr>
<tr><td align='center'><img id='cursor' name='cursor' src="images/wait.gif"></td></tr>
</tbody></table>
</div>

Then the jQuery:

function waitCursor()
{
    $('#wait').css({
        'top' : '0px',
        'left' : '0px',
        'width' : '100%',
        'height' : '100%'
        });
}

function defCursor()
{
    $('#wait').css({
    'top': '-9999px',
    'left' : '-9999px',
    'width' : '0%',
    'height' : '0%'
    });

and

$(document).ajaxStart(function(){ waitCursor(); })
    .ajaxComplete(function(){ defCursor(); })
    .ajaxStop(function(){ defCursor(); });

Old school but simple also. Just has a DIV with a table in it. The table has only to rows. The first one is 50% of the height of the entire screen. The second one simply centers the wait cursor on the screen. You could always make the height of the first one 45% or whatever half the height of the screen is minus half the height of the image. But as I said - this is just for a simple in-house program. The thing is - this works on all browsers without trying to jump through a lot of hoops to get it to show up. I've seen something similar on other major websites. So obviously others have gotten fed-up over the browsers not showing a wait cursor when needed and truth to tell - I remembered seeing this and wondered just how hard it would be to replicate. Now I know - it isn't hard at all.

Have fun!

Answer 6

  $('html, body').css("cursor", "wait");  

Use this code before calling AJAX

Then:

  $('html, body').css("cursor", "default");   

In the success function

Example:

  $('html, body').css("cursor", "wait"); 
               $.ajax({
                       url://your url  ,
                       type: //your type post or get 
                       dataType: "html",
                       data: //data send by ajax
                       success: function(returnData){
                       $('html, body').css("cursor", "default");
                                   //any other actions ....
                                   },
                                   error: function(e){
                                     alert(e);
                                   }
                                });      

Answer 7

In your main function add the following:

$('html, body').css("cursor", "wait");  

then declare this function (which is the ajax result):

function returnedValues () {    
  if (xmlhttp.readyState==4) 
  {      
     $('html, body').css("cursor", "auto");   
  }  
} 

And will work amazingly :)