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

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.