Ändern Sie den Mauszeiger, wenn Ajax aufruft

Question

Ich möchte den Mauszeiger in das Symbol "Wait" ändern, wenn wir den Ajax -Anruf ausführen und nach Abschluss des Anrufs wieder zum Standardzeiger zurückkehren. Ich habe wie folgt versucht, aber mein Problem ist, dass es nur an Firefox funktioniert, bis ich nicht auf die Maustaste klicke/drücke. Hier ist mein Code:

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

Könnte jemand bitte helfen, wie man oben ändert, um das Problem zu lösen, dass es in Firefox und dh auch funktioniert.

Answer 1

Schauen Sie sich die jQuery -Get -Methode an. Es ist sehr einfach zu verwenden und behandelt auch Callback. Sie haben also kein Problem damit, den Code hinzuzufügen, um den Maus -Cursor zurückzulegen ...

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

Beispiel...

$('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

Ab JQuery 1.9, So kann dies getan werden:

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

}).ajaxComplete(function () {

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

});

CSS

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

Answer 3

Dieser Beitrag hier Hat eine großartige Lösung für das Problem.

Hier ist seine Lösung:

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

Und dann in der CSS:

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

Ich mag den CSS -Ansatz und umschaltet eine Klasse, anstatt das CSS im JavaScript tatsächlich zu ändern. Scheint für mich ein sauberer Ansatz.

Um dies speziell auf Ihren Code anzuwenden, ändern Sie das JavaScript, das versucht, den Cursor auf Just zu ändern $(this).addClass('busy'); Wenn Sie dann den Cursor zurück ändern möchten, rufen Sie einfach an $(this).removeClass('busy');

Answer 4

Einfache und einfache Lösung fügen Sie einfach den folgenden Code zu jeder Seite hinzu, die Sie betroffen sein möchten:

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

Und das CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

Natürlich können Sie dies entsprechend Ihren Bedürfnissen ändern, aber für einen einfachen effektiven Weg, um einen Ladecursor bei jedem Ajax -Anruf anzuzeigen, ist dies der richtige Weg (oder zumindest die Art und Weise, wie ich es tun würde).

Answer 5

Keine der Antworten hier auf Stack Overflow würde für mich funktionieren. Ich benutze das neueste und größte Firefox für die Entwicklung und andere verwenden hier IE, Chrome usw. ... Jedes Mal, wenn ich Jquerys Ajax nichts passierte, würde nichts passieren und nur wenn der Ajax -Anruf zurückkam - würde sich der Cursor ändern. Dann würde es im Wartecursor stecken. Also - der Anruf wird getätigt, der Server hat die neuen Informationen zurückgegeben, die Informationen wurden angezeigt und dann wham! Warten Sie Cursor Displays und verschwinden nicht. Ich habe alle gegebenen Antworten ausprobiert. Das .ajaxxxxx -Zeug wurde genannt. (Ich habe eine Warnung ("hier") in die Funktionen und diese "hier" aufgetaucht. Die ganze Zeit zeigten sich jeder einzelne Anruf. Sehr deprimierend.

Also ging ich "OK - neue Sachen funktionieren nicht. Was ist mit der alten Schule?" Ich weiß, dass es klobig ist - aber das ist kein großes Programm, an dem ich arbeite. Es ist nur ein kleiner Redakteur, damit mehrere Personen unsere Datenbank gleichzeitig bearbeiten können. Ich werde niemals das Licht des Internets sehen. Nur das Intranet. :-) Wie auch immer, das funktioniert und funktioniert sehr. Sie müssen Ihren eigenen Wartecursor bereitstellen. Ich habe gerade eine von Google Images abgeholt.

Erstens - die 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>

Dann die 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%'
    });

und

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

Alte Schule aber auch einfach. Habe nur einen Div mit einem Tisch. Die Tabelle hat nur Zeilen. Der erste ist 50% der Höhe des gesamten Bildschirms. Der zweite zentriert einfach den Wartecursor auf dem Bildschirm. Sie könnten immer die Höhe des ersten 45% oder die halbe Höhe des Bildschirms minus die Hälfte der Bildhöhe haben. Aber wie gesagt - dies ist nur für ein einfaches internes Programm. Die Sache ist - das funktioniert bei allen Browsern, ohne zu versuchen, viele Reifen zu durchspringen, um es aufzutauchen. Ich habe auf anderen großen Websites etwas Ähnliches gesehen. Offensichtlich haben andere über die Browser, die bei Bedarf keinen Wartecursor zeigten, gesät, dass ich es nicht zu sagen hatte - ich erinnerte mich daran, dass ich das gesehen hatte, und fragte mich, wie schwer es wäre, sich zu replizieren. Jetzt weiß ich - es ist überhaupt nicht schwer.

Habe Spaß!

Answer 6

Fügen Sie in Ihrer Hauptfunktion Folgendes hinzu:

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

Dann deklarieren Sie diese Funktion (das ist das AJAX -Ergebnis):

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

Und wird erstaunlich funktionieren :)

Answer 7

Ich mag die Lösung nicht, die einfach die CSS -Eigenschaft zum Body -Tag hinzufügt: Es wird nicht funktionieren, wenn Sie bereits einen Cursor für Ihr Element zugewiesen haben.

Schauen Sie sich meine Lösung hier an:https://stackoverflow.com/a/26183551/1895428

Answer 8

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

Verwenden Sie diesen Code, bevor Sie AJAX aufrufen

Dann:

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

In der Erfolgsfunktion

Beispiel:

  $('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, Körper'). CSS ("Cursor", "Wait"); funktioniert perfekt