Cambia puntatore del mouse quando chiamata ajax

Question

Desidero cambiare il puntatore del mouse sul simbolo "Attendi" quando eseguiamo la chiamata AJAX e torniamo al puntatore predefinito dopo aver completato la chiamata. Ho provato come segue, ma il mio problema è che sta lavorando su Firefox fino a quando non clicco/preme il pulsante del mouse. Qui è il mio codice:

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"; 
    } 
} 

Qualcuno potrebbe aiutare come cambiare sopra per risolvere il problema soo che shud funziona in Firefox e IE troppo.

Answer 1

Dai un'occhiata al metodo jQuery get. E 'molto semplice da usare e gestisce richiamata e, in modo non avrete alcun problema aggiungendo il codice per impostare il cursore del mouse indietro ...

http://api.jquery.com/jQuery.get/

Esempio ...

$('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 ha un'ottima soluzione per il problema.

Ecco la sua soluzione:

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

E poi nel CSS:

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

Mi piace l'approccio CSS e commutando una classe piuttosto che realmente cambiare il CSS in Javascript. Sembra un approccio più pulito per me.

Per applicare questo al codice specifico, si dovrebbe cambiare il codice Javascript che sta cercando di cambiare il cursore appena $(this).addClass('busy'); poi quando si desidera cambiare il cursore indietro basta chiamare $(this).removeClass('busy');

Answer 3

Nella funzione principale aggiungere il seguente :

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

poi dichiarare questa funzione (che è il risultato Ajax):

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

e Will funziona sorprendentemente :)

Answer 4

Come di jQuery 1.9, questo è come questo può essere fatto:

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

}).ajaxComplete(function() { 

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

}); 

CSS

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

Answer 5

Non mi piace la soluzione che è sufficiente aggiungere la proprietà css al tag body: non funzionerà se hai già un cursore assegnato al tuo elemento.

Dai un'occhiata a mia soluzione qui: https://stackoverflow.com/a/26183551/1895428

Answer 6

Nessuna delle risposte fornite qui su Stack Overflow avrebbe funzionato per me. Sto usando l'ultima e più grande FireFox per lo sviluppo e altri qui usano IE, Chrome, ecc .... Ogni volta che ho fatto una chiamata a AJAX di jQuery non succederà nulla e SOLO quando la chiamata AJAX è tornata, il cursore cambierà. Quindi sarebbe bloccato nel cursore di attesa. Quindi - la chiamata è stata effettuata, il server ha restituito le nuove informazioni, le informazioni sono state visualizzate e WHAM! Il cursore di attesa viene visualizzato e non andrà via. Ho provato TUTTE le risposte fornite.La roba .ajaxXXXX veniva chiamata. (Ho inserito un ALERT ("QUI") nelle funzioni e quelle "QUI" sono apparse tutte le volte Ogni singola chiamata Molto deprimente

Così sono andato "Ok - roba nuova no lavoro. Che ne dici di andare a scuola? "So che è faticoso farlo, ma questo non è un grande programma su cui sto lavorando. È solo un piccolo editor, quindi diverse persone possono modificare il nostro database allo stesso tempo. Non vedrò mai la luce di Internet. Solo l'intranet. :-) Comunque, funziona e funziona in modo terrificante. È necessario fornire il proprio cursore di attesa. Ho appena preso uno di Google Immagini da usare.

In primo luogo - il codice 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> 

Poi il 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%' 
    }); 

e

$(document).ajaxStart(function(){ waitCursor(); }) 
    .ajaxComplete(function(){ defCursor(); }) 
    .ajaxStop(function(){ defCursor(); }); 

vecchia scuola, ma anche semplice. Ha solo un DIV con un tavolo. La tabella ha solo le righe. Il primo è il 50% dell'altezza dell'intero schermo. Il secondo centra semplicemente il cursore di attesa sullo schermo. Puoi sempre fare in modo che l'altezza del primo 45% o di qualsiasi altra metà dell'altezza dello schermo sia meno della metà dell'altezza dell'immagine. Ma come ho detto, questo è solo per un semplice programma interno. Il fatto è che funziona su tutti i browser senza cercare di passare attraverso un sacco di cerchi per farlo apparire. Ho visto qualcosa di simile su altri importanti siti web. Quindi, ovviamente, altri si sono stufati dei browser che non mostravano un cursore di attesa quando necessario e la verità da dire - mi sono ricordato di averlo visto e mi sono chiesto quanto sarebbe stato difficile replicarlo. Ora lo so - non è affatto difficile.

Buon divertimento!

Answer 7

soluzione semplice e facile, basta aggiungere il seguente codice a ogni pagina che si desidera di essere colpiti:

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

E il CSS:

.ajaxLoading { 
    cursor: progress !important; 
} 

Naturalmente, è possibile modificare questo in base alle le tue esigenze, ma per un modo semplice e efficace di visualizzare un cursore di caricamento su ogni chiamata Ajax, questa è la strada da percorrere (o almeno, il modo in cui lo farei).

Answer 8

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

Usa questo codice prima di chiamare AJAX

Poi:

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

Nella funzione successo

Esempio:

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