jQuery: ajax event

Question

OK here is my code

$("#content_Div").ajaxStart(function () {
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

this is a fairly simple problem: on ajaxStart the cursor immediately changes to the (wait)hourglass but on ajaxComplete it doesnt change back to defalut untill you move the mouse.

lol dat was my problem but while i was writing this i realized after ajaxComplete if you click it will change back to default, so the only reason cursor changes immediately on ajaxStart is because you have to double click on a element in the content_Div in order to start the request so the click event is wat is changing the cursor after the ajaxStart event has begun . so what i want is a way to change to cursor without having to move it or click again.

obviously i want to use the cursor to inform user when request is done.

thanks in advance

for Thomas:

function DF() { //Deletes selected File
if (selectedfiles.length == 0) {
    alert("No file slected!");
    return
};
var selectedtxt = (selectedfiles.length == 1) ? "'" + basename(selectedfiles[0]) + "'?" : 'these ' + selectedfiles.length + ' files?';
if (confirm("Are you sure you want to delete " + selectedtxt)) {
    $.each(selectedfiles, function () {
        $.post("server/editfile.php", {
            user: user,
            oper: "del",
            path: "../" + this
        }, function (res) {
            if (res) {
                alert(res);
            }
            else LT(dirHistory[current]);
        });
    })
}

}

Answer 1

OK Its been about 5 hours since i posted this question and no one has even made a attempt at answering it yet. So im just gonna post what i have found.

This is a Google chrome and Safari Bug. chromium

In All other Browsers you are able to dynamically change the mouse cursor without the user having to click or move the mouse.

witch defeated what i was trying to do. inform user when request was done, if user takes there hand off mouse and waits for the cursor to change they will be waiting all day and night or until they tried to leave because they taught my webpage was frozen. there is no fix because if you check link above the bug is still Unconfirmed. i found no work around either so this is what i did

$("#content_Div").ajaxStart(function () {
    if(!$.browser.safari)//ignores ajaxStart if browser is safari or chrome
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

Answer 2

It does appear that the user would have to move the cursor before it changes, but in addition to this, there's another problem. If the user moves the cursor off of the #content_Div then they cannot see whether the data is loading or not, since the CSS only applies while hovering over that one particular DIV.

A method that would clearly show that data is being fetched, irrespective of what the user does, is to make use of an animated gif, "Loading...." lettering, or both. This solution is also a little less intrusive than changing the user's cursor.

If, when data is requested, you append a loading image to the div where the data will be shown, then this loading image will naturally disappear once the data is loaded. For example:

$("#content_Div").ajaxStart(function () {
    $("#content_Div").append('<img src="loading.gif" />');
});

In this case ajaxStop isn't needed, since the loaded data replaces the image.

Here is a jsFiddle example that makes use of both an image and lettering.

jsFiddle with multiple buttons and a loading div at the center of the page.