cursor wait for ajax call

Switch to cursor wait while your ajax call is in progress. Return to default on success.

HTML

<div id="container">
    <div id="another_cursor"></div>
    <a onclick="get_results()">click here</a>
</div>

CSS

#container {
    display: inline-block;
    padding: 0 200px 200px;
    background: #ddd;
}

#another_cursor {
    width: 50px;
    height: 50px;
    margin: 50px 0 100px;
    background: #f00;
    cursor: move;
}

a { cursor: pointer; }

.cursor-wait {
	cursor: wait !important;
}

JavaScript

cursor_wait = function()
{
    // switch to cursor wait for the current element over
    var elements = $(':hover');
    if (elements.length)
    {
        // get the last element which is the one on top
        elements.last().addClass('cursor-wait');
    }
    // use .off() and a unique event name to avoid duplicates
    $('html').
    off('mouseover.cursorwait').
    on('mouseover.cursorwait', function(e)
    {
        // switch to cursor wait for all elements you'll be over
        $(e.target).addClass('cursor-wait');
    });
}

remove_cursor_wait = function()
{
    $('html').off('mouseover.cursorwait'); // remove event handler
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default
}

get_results = function(){
    
    cursor_wait();
    
    /*
    $.ajax({
        type: "POST",
        url: "myfile.php",

        data: { var : something },

        success: function(data)
        {
            remove_cursor_wait();
        }
    });
    */
    
    // simulation of a 3 sec ajax call
    setTimeout(remove_cursor_wait, 3000);
}