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 (wait) hourglass, but on ajaxComplete it does not go back to defalut until you move the mouse.

lol this was my problem, but while I was writing this, I realized that after ajaxComplete, if you click, it will change to the default value, so the only reason the cursor changes immediately to ajaxStart is that you need to double click an element in content_Div to start the request, so the click event is a cursor change after the start of the ajaxStart event. so I want to change the cursor without moving it or clicking again.

Obviously, I want to use the cursor to inform the user when the request is complete.

early

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 seems that the user will need to move the cursor before changing it, but in addition to this, another problem arises. If the user moves the cursor with #content_Div , then they cannot see whether the data is being loaded or not, since CSS is only applied when you hover over one specific DIV.

A method that would clearly show that the data is retrieved, regardless of what the user does, is to use an animated gif, the inscription "Loading ...", or both. This solution is also a little less intrusive than changing a custom cursor.

If, when requesting data, you add a boot image to the div where the data will be displayed, then this boot image will naturally disappear after the data is loaded. For example:

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

In this case, ajaxStop is not required as the downloaded data replaces the image.

Here is a jsFiddle example that uses both an image and a caption.

jsFiddle with a few buttons and a download section in the center of the page.

Answer 2

OK. About 5 hours have passed since I posted this question, and no one even tried to answer it. So I’ll just post what I found.

This is Google Chrome and Safari Bug. chromium

In all other browsers, you can dynamically change the mouse cursor without requiring a click or mouse movement.

the witch defeated what I tried to do. inform the user when the request has been completed, if the user takes a hand with the mouse and waits until the cursor changes, they will wait all day and night or until they try to leave, because they taught me to freeze my web page. there is no correction, because if you check the link for an error, it is still not confirmed. I also did not find work, so 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 3

I would rather do it more elegantly, for example:

 $(function(){ $("html").bind("ajaxStart", function(){ $(this).addClass('busy'); }).bind("ajaxStop", function(){ $(this).removeClass('busy'); }); }); 

CSS

 html.busy, html.busy * { cursor: wait !important; } 

Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/