Cambiar el puntero del mouse cuando Ajax llame

Question

Quiero cambiar el puntero del mouse al símbolo de "espera" cuando ejecutemos la llamada AJAX y regresemos 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 haga clic/presione 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";
    }
}

¿Alguien podría ayudar a cambiar anteriormente para resolver el problema, así que también debe funcionar en Firefox e IE?

Answer 1

Eche un vistazo al método JQuery Get. También es muy simple de usar y maneja la devolución de llamada, por lo que no tendrá problemas para agregar el código para configurar 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

});

Answer 2

A partir de jQuery 1.9, así es como esto se puede hacer:

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

}).ajaxComplete(function () {

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

});

CSS

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

Answer 3

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 CSS y alternando una clase en lugar de cambiar el CSS en el JavaScript. Parece un enfoque más limpio para mí.

Para aplicar esto específicamente a su código, cambiaría el JavaScript que está tratando de cambiar el cursor a solo $(this).addClass('busy'); Luego, cuando quieras cambiar el cursor, solo llama $(this).removeClass('busy');

Answer 4

Solución simple y fácil, solo agregue el siguiente código a cada página que desea que se vea 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 efectiva de mostrar un cursor de carga en cada llamada de Ajax, este es el camino a seguir (o al menos, la forma en que lo haría).

Answer 5

Ninguna de las respuestas proporcionadas aquí en Stack Overflow funcionaría para mí. Estoy usando el último y mejor Firefox para el desarrollo y otros aquí usan es decir, cromo, etc. Cada vez que llamaba a JQuery's Ajax, nada sucedería y solo cuando la llamada Ajax regresara, el cursor cambiaría. Entonces estaría atascado en el cursor de espera. Entonces, la llamada está realizada, el servidor devolvió la nueva información, se mostró la información y luego Wham! Espera las pantallas del cursor y no desaparecerá. Probé todas las respuestas dadas. Se llamaban las cosas .AJAXXXXX. (Puse una alerta ("aquí"); en las funciones y esas "aquí" aparecieron todo el tiempo. Cada llamada. Muy deprimente.

Así que fui "Ok, las cosas nuevas no funcionan. ¿Qué hay de ir de la vieja escuela?" Sé que es torpe hacerlo, pero este no es un gran gran programa en el que estoy trabajando. Es solo un pequeño editor, por lo que varias personas pueden 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 agarrar una de las imágenes de Google 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(); });

Old School pero simple también. Solo tiene un Div con una mesa. 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 la altura del primero 45% o cualquier mitad de la altura de la pantalla es menos la mitad de la altura de la imagen. Pero como dije, esto es solo para un programa simple interno. La cuestión es que esto funciona en todos los navegadores sin tratar de saltar a través de muchos aros para que aparezca. He visto algo similar en otros sitios web importantes. Entonces, obviamente, otros se han volado sobre los navegadores que no muestran un cursor de espera cuando fuera necesario y la verdad para decir: recordé haber visto esto y me pregunté qué tan difícil sería replicar. Ahora lo sé, no es difícil en absoluto.

¡Que te diviertas!

Answer 6

En su función principal, agregue lo siguiente:

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

luego declare esta función (que es el resultado AJAX):

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

Y funcionará increíblemente :)

Answer 7

No me gusta la solución que simplemente agregue la propiedad CSS a la etiqueta del cuerpo: no funcionará si ya tiene un cursor asignado a su elemento.

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

Answer 8

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

Use este código antes de llamar a AJAX

Después:

  $('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);
                                   }
                                });      

Answer 9

$ ('html, cuerpo'). CSS ("cursor", "esperar"); está funcionando perfectamente