Ajaxが呼び出すときにマウスポインターを変更します

StackOverflow https://stackoverflow.com/questions/8805507

質問

Ajaxコールを実行したときにマウスポインターを「待機」シンボルに変更し、コールを完了した後にデフォルトのポインターに戻りたいと思います。私は次のように試しましたが、私の問題は、マウスボタンをクリック/押しないまで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でも機能するように問題を解決する方法を手伝ってください。

役に立ちましたか？

解決

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

});

他のヒント

のように jQuery 1.9, 、これがどのように行われるかです：

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

}).ajaxComplete(function () {

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

});

CSS

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

この投稿はこちら 問題のための素晴らしい解決策があります。

これが彼の解決策です： 

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

そして、CSSで：

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

JavaScriptのCSSを実際に変更するのではなく、CSSアプローチとクラスの切り替えが好きです。私にとってはきれいなアプローチのようです。

これを具体的にコードに適用するには、カーソルを単に変更しようとしているJavaScriptを変更します $(this).addClass('busy'); 次に、カーソルをバックしたいときは、電話をかけてください $(this).removeClass('busy');

シンプルで簡単な解決策、影響を受ける各ページに次のコードを追加するだけです。

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

そしてCSS：

.ajaxLoading {  
  cursor: progress !important;  
}

もちろん、あなたはあなたのニーズに応じてこれを変更することができますが、すべてのAjaxコールに読み込みカーソルを表示する簡単な効果的な方法のために、これが行く方法です（または少なくとも私がそれをする方法）。

Stack Overflowでここで提供されている回答はどれも私にはうまくいきません。私は開発のために最新かつ最高のFirefoxを使用しており、他の人はIE、Chromeなどを使用しています。...jQueryのAjaxに電話をかけるたびに、Ajaxコールが戻ってきたときにのみ、カーソルが変わります。その後、それは待機カーソルに詰まってしまいます。そのため、通話が行われ、サーバーは新しい情報を返し、情報が表示され、その後WHAM！カーソルディスプレイを待つと、消えません。私は与えられたすべての答えを試しました。 .ajaxxxxxのものが呼ばれていました。 （私はアラート（「ここ」）;関数に「ここ」に「ここ」が常に現れました。すべての電話。非常に憂鬱です。

だから私は「OK-新しいものがうまくいかない。古い学校に行くのはどうですか？」私はそうすることは不格好だと知っています - しかし、これは私が取り組んでいる素晴らしい大きなプログラムではありません。それはほんの少しの編集者であるため、数人がデータベースを同時に編集できます。インターネットの光を見ることはありません。イントラネットのみ。 :-)とにかく、これは恐ろしく機能し、機能します。独自の待機カーソルを提供する必要があります。使用する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％または画面の高さの半分を画像の高さの半分にマイナスすることができます。しかし、私が言ったように、これは単純な社内プログラムのためだけです。事は - これは、多くのフープを飛び越えて表示することなく、すべてのブラウザで機能します。他の主要なWebサイトで似たようなものを見てきました。したがって、明らかに、他の人は、必要なときに待機カーソルを表示しないブラウザにうんざりしていて、真実を伝えることができました。今、私は知っています - それはまったく難しくありません。

楽しむ！

メイン関数に次のものを追加します。

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

次に、この関数を宣言します（これはAJAXの結果です）：

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

そして驚くほど働きます:)

CSSプロパティをボディータグに追加する単純なソリューションが好きではありません。既にカーソルが要素に割り当てられている場合、機能しません。

ここで私の解決策をご覧ください：https://stackoverflow.com/a/26183551/1895428

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

$（ 'html、body'）。css（ "cursor"、 "wait"）;完全に機能しています

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top