jQuery: evento ajax

Question

bien aquí es mi código

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

este es un problema bastante simple: en ajaxStart el cursor cambia inmediatamente al reloj de arena (espera), pero en ajaxComplete que no cambia de nuevo a defalut hasta que usted se mueve el ratón.

lol dat fue mi problema, pero mientras escribía esto me di cuenta de que después de ajaxComplete, si hace clic volverá al valor predeterminado, por lo que la única razón por la que el cursor cambia inmediatamente en ajaxStart es porque tiene que hacer doble clic en un elemento del content_Div para iniciar la solicitud para que el evento click sea wat está cambiando el cursor después de que el evento ajaxStart haya comenzado. entonces lo que quiero es una forma de cambiar al cursor sin tener que moverlo o hacer clic de nuevo.

obviamente quiero usar el cursor para informar al usuario cuando se realiza la solicitud.

gracias de antemano

para 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 Su sido cerca de 5 horas desde que he publicado esta pregunta y nadie ha hecho un intento de responder a ella todavía. Así que voy a publicar lo que he encontrado.

Esto es Google Chrome y Safari Bug. chromium

En Todos los demás navegadores, puede cambiar dinámicamente el cursor del mouse sin que el usuario tenga que hacer clic o mover el mouse.

bruja derrotó a lo que estaba tratando de hacer. Informar al usuario cuando se realizó la solicitud, si el usuario saca la mano del mouse y espera a que el cursor cambie, estarán esperando todo el día y la noche o hasta que intenten irse porque me dijeron que mi página web estaba congelada. no hay solución porque si revisas el enlace de arriba, el error aún no está confirmado. he encontrado ningún trabajo en torno a cualquiera así que esto es lo que hice

$("#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

sí parece que el usuario tendría que mover el cursor antes de que cambie, pero además de esto, hay otro problema. Si el usuario mueve el cursor fuera del #content_Div, entonces no pueden ver si los datos se están cargando o no, ya que el CSS solo se aplica al pasar sobre ese DIV en particular.

Un método que mostraría claramente que se están obteniendo los datos, independientemente de lo que haga el usuario, es hacer uso de un gif animado, letras "Cargando ....", o ambos. Esta solución también es un poco menos intrusiva que cambiar el cursor del usuario.

Si, cuando se soliciten datos, anexar una imagen de carga hasta el div donde se mostrarán los datos, a continuación, esta imagen de carga desaparecerá de forma natural una vez que se cargan los datos. Por ejemplo:

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

En este caso no es necesario ajaxStop, ya que los datos cargados reemplaza la imagen.

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.

Answer 3

yo preferiría hacerlo más elegante de esta manera:

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

CSS:

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

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