web-dev-qa-db-ja.com

ajax呼び出し時にマウスポインターを変更する

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も同様です。

javascriptjqueryajaxmousemouse-pointer
23
Somi Meer

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

});
11
Reinstate Monica Cellio

jQuery 1.9 以降、次のように実行できます。

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

}).ajaxComplete(function () {

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

});

[〜＃〜] css [〜＃〜]

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

この投稿はこちら は、問題の優れた解決策を持っています。

これが彼の解決策です：

_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のアプローチとクラスの切り替えが好きです。私にはよりすっきりとしたアプローチのようです。

これをコードに具体的に適用するには、カーソルを$(this).addClass('busy');に変更しようとしているJavascriptを変更し、カーソルを元に戻す場合は$(this).removeClass('busy');を呼び出します。

6
Joel

シンプルで簡単なソリューション。影響を受けたい各ページに次のコードを追加するだけです。

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

そしてCSS：

.ajaxLoading {  
  cursor: progress !important;  
}

もちろん、必要に応じてこれを変更することもできますが、すべてのajax呼び出しでローディングカーソルを表示する簡単で効果的な方法としては、これが（または少なくとも、私が行う方法）の方法です。

3
Joe

Stack Overflowでここに提供された答えはどれも私にとってはうまくいきません。私は最新で最高のFireFoxを開発に使用しており、他のユーザーはIE、Chromeなどを使用しています... jQueryのAJAXを呼び出すたびに、何も起こらず、= AJAXコールが戻ってきました-カーソルが変更されます。それから、それは待機カーソルに留まります。そのため、コールが行われると、サーバーは新しい情報を返し、情報が表示されてからWHAM！カーソルの表示を待ち、消えないようにします。与えられたすべての答えを試しました。ajaxXXXXのものが呼び出されていました（ALERT（ "HERE"）を挿入しました）;関数に「HERE」がすべて表示されました時のすべての呼び出し。非常に憂鬱。

それで、「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サイトでも似たようなものを見たことがあります。明らかに、他の人がブラウザ上でうんざりしていて、必要なときに待機カーソルを表示せず、真実を伝える必要がある-私はこれを見て覚えていて、複製するのがどれほど難しいか疑問に思いました。今私は知っています-それはまったく難しいことではありません。

楽しんで！

1
Mark Manning

Cssプロパティをbodyタグに追加するだけのソリューションは好きではありません。要素に既にカーソルが割り当てられている場合は機能しません。

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

0
pmrotule

メイン関数に以下を追加します：

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

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

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

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

0
GingerHead

$（ 'html、body'）。css（ "カーソル"、 "待機"）;完璧に働いています

0
tani
  $('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);
                                   }
                                });
0
Yaser Saffo