Warum funktioniert mein jQuery-Cursor-Code nicht?

Question

Ich habe diese jQuery auf einer Seite bekommen:

<script> 
$(document).ready(function() { 
    $("#btnGetData").click(function() { 
     var _begdate = $("#datepickerFrom").val(); 
     var _enddate = $("#datepickerTo").val(); 
     var _unit = $("#unitName").text(); 
     document.body.style.cursor = 'wait'; 

     $.ajax({ 
      type: 'GET', 
      url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })' 
        .replace("un", encodeURIComponent(_unit)) 
        .replace("bd", encodeURIComponent(_begdate)) 
        .replace("ed", encodeURIComponent(_enddate)), 
      contentType: 'text/plain', 
      cache: false, 
      xhrFields: { 
       withCredentials: false 
      }, 
      success: function (returneddata) { 
       $("body").html(returneddata); 
      }, 
      error: function() { 
       console.log('hey, boo-boo!'); 
      } 
     }); 

     document.body.style.cursor = 'pointer'; 
    }); 
}); 
</script> 

Bitte beachte, dass ich versuche, einen Wartecursor früh im Click-Handler zu erstellen:

document.body.style.cursor = 'wait'; 

... und dann wieder zurückkehren der Standard am Ende:

document.body.style.cursor = 'pointer'; 

Es funktioniert jedoch nicht - der Cursor ändert sich nie. Der Code funktioniert zwar (der Ajax-Aufruf wird erfolgreich abgeschlossen), aber der Cursor bleibt stonefaced und der Benutzer fragt sich, ob etwas passiert.

Was muss ich noch tun, damit sich der Cursor in eine Wartehaltung verwandelt?

Answer 1

Aufgrund der Natur der ajax Anrufe (dh sein async) den Code ausführt, um die erste Zeile des Cursors

document.body.style.cursor = 'wait';

dann zu ändern, Führt den Ajax-Aufruf aus (Hinweis: Es wartet nicht auf die Antwort).

und dann die letzte Zeile ausführt:

document.body.style.cursor = 'pointer';

Es geschieht alles so schnell, werden Sie wahrscheinlich nicht bemerken.

Zu einem späteren Zeitpunkt wird die Ajax-Antwort von den Rückrufhandlern success oder fail empfangen und verarbeitet.

Um den Cursor immer zu ändern, nachdem die Ajax-Antwort (entweder Erfolg oder Misserfolg) empfangen wird, benötigen Sie einen anderen Rückruf always genannt hinzufügen - etwas entlang der Linien von:

... 
, 
always: function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
... 

Hinweis, abhängig von der Version von Jquery könnte dies stattdessen ein done() Callback genannt werden.

prüfen Dokumentation hier: http://api.jquery.com/jquery.ajax/

UPDATE

ich das Format der derzeitigen Praxis aktualisiert und ergänzt den fehlenden Anruf ...

$(document).ready(function() { 
 
    $("#btnGetData").click(function() { 
 
    //var _begdate = $("#datepickerFrom").val(); 
 
    // var _enddate = $("#datepickerTo").val(); 
 
    // var _unit = $("#unitName").text(); 
 
    document.body.style.cursor = 'wait'; 
 

 
    $.ajax({ 
 
     type: 'GET', 
 
     url: 'http://stackoverflow.com/', 
 
     contentType: 'text/plain', 
 
     cache: false 
 
     }) 
 
     .done(function() { 
 
     console.log('hey, success!'); 
 
     }) 
 
     .fail(function() { 
 
     console.log('hey, boo-boo!'); 
 
     }) 
 
     .always(function() { 
 
     console.log('hey, done!'); 
 
     document.body.style.cursor = 'pointer'; 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btnGetData">Get it</button>

Answer 2

Try this:

<script> 
$(document).ready(function() { 
    $("#btnGetData").click(function() { 
     var _begdate = $("#datepickerFrom").val(); 
     var _enddate = $("#datepickerTo").val(); 
     var _unit = $("#unitName").text(); 
     document.body.style.cursor = 'wait'; 

     $.ajax({ 
      type: 'GET', 
      url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })' 
        .replace("un", encodeURIComponent(_unit)) 
        .replace("bd", encodeURIComponent(_begdate)) 
        .replace("ed", encodeURIComponent(_enddate)), 
      contentType: 'text/plain', 
      cache: false, 
      xhrFields: { 
       withCredentials: false 
      } 
    }).done(function(returneddata){ 
     $("body").html(returneddata); 
    }).fail(function(){ 
     console.log('hey, boo-boo!'); 
    }).always(function(){ 
     document.body.style.cursor = 'pointer'; 
    }); 
}); 

ich auch "modernisiert" haben Ihre jQuery verwenden getan() fail(), die die neueren Standards sind. Der always() - Handler wird (vielleicht offensichtlich) immer ausgeführt, nachdem der AJAX-Aufruf zurückkehrt.

Ich habe die Hand eingegeben, also hoffe ich, dass die Klammern alle aufreihen. Ich bin sicher, du wirst das Wesentliche verstehen.

Wenn Sie auf this jQuery doc schauen, werden Sie sehen, dass success, error veraltet sind.

Edit: Ich habe eine working fiddle für Sie erstellt. Sobald Sie auf die Schaltfläche klicken, simuliert die Geige einen 5 Sekunden langen AJAX-Aufruf. Eine Änderung ist, dass ich den Stil von HTML und Körper verändert $('html,body').css('cursor','wait');