jQueryの待機カーソルコードが機能しないのはなぜですか？

Question

私はページでこのjQueryのを持っている：私はクリックハンドラの早い段階で待機カーソルを作成しよう

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

注：

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

を...そしてバックに戻します終了時のデフォルト：

​​

ただし、カーソルは変更されません。コードは機能します（ajax呼び出しは正常に完了します）が、カーソルはストーンフェースのままであり、ユーザーは何か起きているかどうか疑問に思います。

カーソルを待っている姿勢に変身させるには、まだ何が必要ですか？

Answer 1

を変更したことですajax呼び出しを実行します（注：応答を待つことはありません）。

、その後は最後の行を実行：

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

それはすべてが非常に速く起こるが、あなたはおそらく気づきません。

ある時点で、ajax応答が受信され、successまたはfailコールバックハンドラのいずれかによって処理されます。

AJAX応答が受信された後、常に（成功または失敗のいずれか）を、カーソルを変更するには、別のコールバックを追加する必要がalwaysと呼ばれる - の線に沿って何か：

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

注意、バージョンに依存します代わりにdone()コールバックと呼ぶことができます。ここ

チェックドキュメント：http://api.jquery.com/jquery.ajax/

UPDATE

私は現在の慣行にフォーマットを更新し、行方不明の呼び出しを追加...

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

このお試しください：新しい基準である）私は）（あなたのjQueryを行う使用することも、 "近代化"、（失敗してきた

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

を。 always（）ハンドラは、AJAX呼び出しが返った後に常に（明らかに）実行されます。

私はこれを手入力したので、角括弧がすべて並んでいることを期待しています。私はあなたが要点を得るだろうと確信しています。

this jQuery docを見ると、success,errorが推奨されていません。

編集：working fiddleを作成しました。ボタンをクリックすると、フィドルは5秒のAJAXコールをシミュレートします。 1つの変更は、私は（つまりは非同期である）のコードは、カーソルdocument.body.style.cursor = 'wait';

を変更するには、最初の行を実行されるため、AJAX呼び出しの性質上、HTMLのスタイルと身体$('html,body').css('cursor','wait');