ajaxコール時にマウスポインタを変更

Question

私たちがAJAXコールを実行し、コール終了後にデフォルトポインタに戻るときにマウスポインタを「Wait」シンボルに変更したい。私は次のようにしてみましたが、私の問題はFirefox上でマウスボタンをクリック/押さない限り動作していることです。ここに私のコードは次のとおりです。

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

誰もが、それはあまりにもFirefoxとIEで働くshudという洙問題を解決するために、上記の変更方法を助けてくださいでした。

Answer 1

jQueryのgetメソッドを見てください。それは

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

例... ...使用することは非常に簡単ですし、あなたが戻ってマウスカーソルを設定するコードを追加する何の問題もないだろうので、同様のコールバックを処理し

$('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にはこの問題に対する優れた解決策があります。ここで

は彼のソリューションです：

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

そしてCSSで：

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

私は、CSSのアプローチが好きで、クラスを切り替えるのではなく、実際にJavaScriptでCSSを変更します。私にとってはよりクリーンなアプローチのようです。あなたが戻ってカーソルを変更したいときだけ$(this).addClass('busy');にカーソルを変更しようとしているあなたのコードにこれを適用するに

具体的には、あなたはJavascriptを変更しますが、その後ちょうど次を追加するには、main関数では$(this).removeClass('busy');

Answer 3

を呼び出します：

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

その後、（Ajaxの結果である）、この関数を宣言：

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

そして意志驚くほど仕事:)

Answer 4

jQuery 1.9のように、これはこれを行う方法です。

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

}).ajaxComplete(function() { 

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

}); 

CSS

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

Answer 5

私は単純にCSSプロパティを追加するソリューションを好きではありませんbodyタグへ：既に要素にカーソルが割り当てられていればうまくいかないでしょう。

は、ここに私の解決策の表情を持っている：スタックオーバーフローの上に、ここでの回答の https://stackoverflow.com/a/26183551/1895428

Answer 6

どれも私のために働くんでしょう。私は最新の偉大なFireFoxを開発に使用しています。ここではIE、Chromeなどを使用しています。jQueryのAJAXを呼び出すたびに何も起きず、AJAX呼び出しが戻ったときだけ - カーソルが変わります。それは待っているカーソルにスタックされます。だから - 呼び出しが行われ、サーバーは新しい情報を返し、情報が表示されてからWHAM！カーソルが表示されたら、離れることはありません。私は与えられたすべての答えを試しました。.ajaxXXXXのものが呼び出されました。 （私はALERT（ "HERE"））を関数に入れ、 "ここ"のすべてが現れていました。古い学校に行くのはどうしたらいいのですか？ "私はそれが頑張っていることを知っていますが、これは私が取り組んでいる大きな大きなプログラムではありません。決してインターネットの光を見るつもりはありません。イントラネットだけです:-)とにかく、これはうまく動作しています。自分の待機カーソルを用意する必要があります。私はちょうど使用するGoogleイメージの1つをつかんだ。

ファースト - 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> 

その後

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

と

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

オールドスクールもシンプル。その中にテーブルを持ったDIVがあります。テーブルには行のみがあります。最初のものは画面全体の高さの50％です。 2番目のものは、画面上に待機カーソルを配置するだけです。最初の45％の高さ、または画面の高さの半分が画像の高さの半分を引いたものでも、常に高さを作ることができます。しかし、私が言ったように、これは単純な社内プログラムのためのものです。事は - これはすべてのブラウザ上でそれが表示されるように多くのフープを飛び越えようとすることなく動作します。私は他の主要なウェブサイトでも同様のことを見てきました。だから明らかに、他のブラウザは、ブラウザー上で必要なときに待機カーソルを表示せず、真実を伝えるようになってしまった - 私はこれを覚えていて、複製するのがいかに難しいだろうと思った。今私は知っています - それは全く難しいことではありません。

楽しくお楽しみください！

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

とCSS：もちろん

.ajaxLoading { 
    cursor: progress !important; 
} 

、あなたがに応じてこれを変更することができ、ちょうどあなたが影響を受けることにしたい各ページに次のコードを追加します

Answer 7

シンプルで簡単な解決策、あなたの必要はありますが、すべてのAjax呼び出しでローディング・カーソルを表示する簡単な方法として、これは（少なくとも、私がやる方法）行く方法です。

Answer 8

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

その後AJAX

を呼び出す前に使用このコードを：成功機能

例で

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

：私の場合は

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