Cambiar el puntero del mouse cuando se llama ajax

Question

Quiero cambiar el puntero del mouse al símbolo "Esperar" cuando ejecutamos la llamada AJAX y regresamos al puntero predeterminado después de completar la llamada. He intentado lo siguiente, 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 ayuda cómo cambiar de arriba para resolver el problema Soo que shud funciona en Firefox e IE también.

Answer 1

Eche un vistazo al método jQuery get. Es muy sencillo de utilizar y se ocupa de devolución de llamada, así, por lo que no tendrá ningún problema al agregar el código para colocar el cursor del ratón hacia atrás ...

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 

}); 

Answer 2

This post here tiene una gran solución para el problema.

Aquí es 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 CSS y alternar una clase en lugar de realmente cambiar el CSS en el Javascript. Parece un enfoque más limpio para mí.

aplicar esto a su código en concreto, tendría que cambiar el código JavaScript que está tratando de cambiar el cursor a solo $(this).addClass('busy'); entonces cuando se desea cambiar el cursor hacia atrás sólo llamar $(this).removeClass('busy');

Answer 3

En su función principal, agregue el siguiente :

$('html, body').css("cursor", "wait"); 

declarará esta función (que es el resultado Ajax):

function returnedValues() {  
    if (xmlhttp.readyState==4) 
    {  
    $('html, body').css("cursor", "auto"); 
    } 
} 

y Will funciona sorprendentemente :)

Answer 4

A partir de jQuery 1.9, esto es cómo se puede hacer esto:

$(document).ajaxStart(function() 
{ 
    $('body').addClass('wait'); 

}).ajaxComplete(function() { 

    $('body').removeClass('wait'); 

}); 

CSS

body.wait *, body.wait 
{ 
    cursor: progress !important; 
} 

Answer 5

no me gusta la solución que sólo tiene que añadir la propiedad CSS a la etiqueta del cuerpo: no va a funcionar si ya tiene un cursor asignado a su elemento.

echar un vistazo a mi solución aquí: https://stackoverflow.com/a/26183551/1895428

Answer 6

Ninguna de las respuestas proporcionadas aquí en desbordamiento de pila trabajaría para mí. Estoy usando la última y mejor FireFox para el desarrollo y otras aquí uso IE, Chrome, etc ... Cada vez que hice una llamada al AJAX de jQuery, no pasaría nada y SÓLO cuando la llamada AJAX regresara, ¿cambiaría el cursor? Entonces estaría atrapado en el cursor de espera. Entonces, la llamada se realiza, el servidor devolvió la nueva información, se mostró la información y luego ¡WHAM! El cursor de espera se muestra y no desaparecerá. Intenté TODAS las respuestas dadas.Las cosas .ajaxXXXX estaban siendo llamadas. (Puse una ALERTA ("AQUÍ"); en las funciones y esos "AQUÍ" aparecieron todo el tiempo. Cada llamada. Muy deprimente.

Así que fui "Ok, las cosas nuevas no trabajo. ¿Qué hay de ir a la vieja escuela? "Sé que es torpe hacerlo, pero este no es un gran programa en el que estoy trabajando. Es solo un pequeño editor para que muchas personas puedan editar nuestra base de datos al mismo tiempo. Nunca voy a ver la luz de internet. Solo la intranet. :-) De todos modos, esto funciona y funciona terriblemente. Debe proporcionar su propio cursor de espera. Acabo de sacar una de Google Images para usar.

En primer lugar - el código 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 el 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 también sencilla. Solo tiene un DIV con una mesa. La tabla solo tiene filas. El primero es el 50% de la altura de la pantalla completa. El segundo simplemente centra el cursor de espera en la pantalla. Siempre puede hacer que la altura del primero sea del 45% o la mitad de la altura de la pantalla menos la mitad de la altura de la imagen. Pero como dije, esto es solo para un programa interno simple. Lo que pasa es que esto funciona en todos los navegadores sin intentar pasar por muchos aros para que aparezca. He visto algo similar en otros sitios web importantes. Así que, obviamente, otros se han cansado de los navegadores que no muestran el cursor de espera cuando es necesario y la verdad que contar. Recordé haber visto esto y me pregunté qué difícil sería replicar. Ahora lo sé, no es difícil en absoluto.

¡Diviértete!

Answer 7

solución simple y fácil, sólo tiene que añadir el siguiente código a cada página que desea ser afectado:

$(document).ajaxStart(function(){ 
    $("body").addClass('ajaxLoading'); 
}); 
$(document).ajaxStop(function(){ 
    $("body").removeClass('ajaxLoading'); 
}); 

Y el CSS:

.ajaxLoading { 
    cursor: progress !important; 
} 

Por supuesto, puede cambiar esto de acuerdo con sus necesidades, pero para una forma simple y eficaz de mostrar un cursor de carga en cada llamada ajax, este es el camino a seguir (o al menos, la forma en que lo haría).

Answer 8

$('html, body').css("cursor", "wait"); 

Usar este código

antes de llamar AJAX

continuación:

$('html, body').css("cursor", "default"); 

En la función é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); 
            } 
           });