javascript - down - Cambia el puntero del mouse cuando llama ajax
mouseout jquery (9)
Quiero cambiar el puntero del mouse al símbolo "Esperar" cuando ejecutamos la llamada AJAX y regresar al puntero predeterminado después de completar la llamada. Lo he intentado de la siguiente manera, pero mi problema es que solo funciona en Firefox hasta que no hago clic / presiono el botón del mouse. Aquí está mi código:
function initializeAjax(url){
$(''html, body'').css("cursor", "wait");
try {
if (url.substring(0,4) == ".mdf") {
var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf(''.mdf''));
var url = database + url;
}
initRequest(url);
returnedValues = null;
req.onreadystatechange = returnedValues;
nocache = Math.random();
req.open("GET", url+"&nocache = "+nocache, false);
req.send(null);
$(''html, body'').css("cursor", "auto");
return req.responseText;
}
catch(err) {
return "Error 8";
}
}
¿Podría alguien, por favor, ayudar a cambiar lo anterior para resolver el problema de modo que también funcione en Firefox e IE?
$ (''html, body''). css ("cursor", "wait"); esta funcionando perfectamente
A partir de jQuery 1.9 , así es como se puede hacer:
$(document).ajaxStart(function ()
{
$(''body'').addClass(''wait'');
}).ajaxComplete(function () {
$(''body'').removeClass(''wait'');
});
CSS
body.wait *, body.wait
{
cursor: progress !important;
}
Echa un vistazo al método jQuery get. Es muy fácil de usar y también maneja la devolución de llamada, por lo que no tendrá ningún problema en agregar el código para volver a colocar el cursor del mouse ...
http://api.jquery.com/jQuery.get/
Ejemplo...
$(''html, body'').css("cursor", "wait");
$.get("yourajaxcall.url", function(data) {
$(''html, body'').css("cursor", "auto");
// Success - do something with "data" here
}).error(function() {
$(''html, body'').css("cursor", "auto");
// There was an error - do something else
});
En su función principal agregue lo siguiente:
$(''html, body'').css("cursor", "wait");
luego declare esta función (que es el resultado de ajax):
function returnedValues () {
if (xmlhttp.readyState==4)
{
$(''html, body'').css("cursor", "auto");
}
}
Y funcionará increíblemente :)
Ninguna de las respuestas proporcionadas aquí en funcionaría para mí. Estoy usando el último FireFox más grande para el desarrollo y otros utilizan IE, Chrome, etc ... Cada vez que realizo una llamada al AJAX de jQuery, nada sucedería y SOLAMENTE cuando volviera la llamada AJAX, cambiaría el cursor. Entonces quedaría atascado en el cursor de espera. Entonces, se realiza la llamada, el servidor devolvió la nueva información, se mostró la información y luego ¡WHAM! Espere que aparezca el cursor y no se irá. Probé TODAS las respuestas dadas. Las cosas .ajaxXXXX estaban siendo llamadas. (Puse una ALERTA ("AQUÍ"); en las funciones y esas "AQUÍ" se muestran todo el tiempo. Cada llamada. Muy deprimente.
Así que dije "Ok, las cosas nuevas no funcionan. ¿Qué hay de ir a la vieja escuela?" Sé que es complicado hacerlo, pero este no es un gran gran programa en el que esté trabajando. Es solo un pequeño editor para que varias personas puedan editar nuestra base de datos al mismo tiempo. Nunca voy a ver la luz de internet. Sólo la intranet. :-) De todos modos, esto funciona y funciona terriblemente. Necesitas proporcionar tu propio cursor de espera. Acabo de agarrar una de Google Images para usar.
Primero - el HTML:
<div id=''wait'' name=''wait''
style=''position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);''>
<table border=''0'' cellspacing=''0'' cellpadding=''0'' style=''width:100%;height:100%;''><tbody>
<tr><td style=''width:100%;height:50%;''> </td></tr>
<tr><td align=''center''><img id=''cursor'' name=''cursor'' src="images/wait.gif"></td></tr>
</tbody></table>
</div>
Entonces la jQuery:
function waitCursor()
{
$(''#wait'').css({
''top'' : ''0px'',
''left'' : ''0px'',
''width'' : ''100%'',
''height'' : ''100%''
});
}
function defCursor()
{
$(''#wait'').css({
''top'': ''-9999px'',
''left'' : ''-9999px'',
''width'' : ''0%'',
''height'' : ''0%''
});
y
$(document).ajaxStart(function(){ waitCursor(); })
.ajaxComplete(function(){ defCursor(); })
.ajaxStop(function(){ defCursor(); });
La vieja escuela pero simple también. Sólo tiene un DIV con una mesa en ella. La tabla solo tiene filas. El primero es el 50% de la altura de toda la pantalla. El segundo simplemente centra el cursor de espera en la pantalla. Siempre puede hacer que la altura del primero 45% o la mitad de la altura de la pantalla sea menos la mitad de la imagen. Pero como dije, esto es solo para un programa interno simple. La cosa es que esto funciona en todos los navegadores sin intentar saltar a través de una gran cantidad de aros para que aparezca. He visto algo similar en otros sitios web importantes. Así que, obviamente, otros se han hartado de que los navegadores no muestren un cursor de espera cuando sea necesario y la verdad sea que lo diga. Recordé haber visto esto y me pregunté qué tan difícil sería replicar. Ahora lo sé, no es nada difícil.
¡Que te diviertas!
No me gusta la solución que simplemente agrega la propiedad css a la etiqueta del cuerpo: no va a funcionar si ya tiene un cursor asignado a su elemento.
Eche un vistazo a mi solución aquí: https://.com/a/26183551/1895428
Solución simple y fácil, simplemente agregue el siguiente código a cada página que desee que se vea afectada:
$(document).ajaxStart(function(){
$("body").addClass(''ajaxLoading'');
});
$(document).ajaxStop(function(){
$("body").removeClass(''ajaxLoading'');
});
Y el CSS:
.ajaxLoading {
cursor: progress !important;
}
Por supuesto, puede cambiar esto según sus necesidades, pero para una manera simple y efectiva de mostrar un cursor de carga en cada llamada ajax, esta es la manera de hacerlo (O al menos, la forma en que lo haría).
Esta publicación aquí tiene una gran solución para el problema.
Aquí está su solución:
function globalAjaxCursorChange()
{
$("html").bind("ajaxStart", function(){
$(this).addClass(''busy'');
}).bind("ajaxStop", function(){
$(this).removeClass(''busy'');
});
}
Y luego en el CSS:
html.busy, html.busy * {
cursor: wait !important;
}
Me gusta el enfoque de CSS y alternar una clase en lugar de cambiar realmente el CSS en el Javascript. Me parece un enfoque más limpio.
Para aplicar esto específicamente a su código, cambiaría el Javascript que intenta cambiar el cursor a solo $(this).addClass(''busy''); luego, cuando desee volver a cambiar el cursor, simplemente llame a $(this).removeClass(''busy'');
$(''html, body'').css("cursor", "wait");
Usa este código antes de llamar a AJAX
Entonces:
$(''html, body'').css("cursor", "default");
En la función de éxito.
Ejemplo:
$(''html, body'').css("cursor", "wait");
$.ajax({
url://your url ,
type: //your type post or get
dataType: "html",
data: //data send by ajax
success: function(returnData){
$(''html, body'').css("cursor", "default");
//any other actions ....
},
error: function(e){
alert(e);
}
});