jQuery Chromeの機能の表示と非表示

Question

AJAXリクエストの実行中に「読み込み中...」と言いたいDivがあります。その後、

$("#test").show(); 
$("#test").html("Loading..."); 

そして：私はこのようなので、イベントは私が最初に来るとき、APEと呼ばれるリアルタイムエンジンを使用すると、事業部を表示し、その後にHTMLを設定している「ロード...」ですChromeで、それが非表示（）関数に到達し、それが消えるまで、だから、Firefoxでロードのdivが表示さ

jsonfields = Ext.decode('[' + $.ajax({ 
    url: "ajax.php?getsensors="+raw.deviceId, 
    success: function(data) { 

     $("#test").hide(); 

    }, 
    async: false 
}).responseText + ']');  

：私のAjaxの関数の中、私はこれを（私がグリッドにそれをロードするためのExtJSを使用しています）を行いますLoading ... divはまったく表示されず、コンソールにエラーはありません。その理由は何ですか？ありがとうございました！

<div id="test"></div> 

まだChromeで神秘的ではないのFirefoxで動作し、）また、私は

$("#test").html("Loading..."); 

を試してみましたが、その後、（空でテストを空にする試してみましたが、テストのIDを有する唯一のdiv要素があります。最初のAJAXリクエストが完了すると、divが正常に空になりますが、再読み込みで再生成されることはありません。

Answer 1

このリンクを参照してくださいされてはjQueryのことですか？私はこのように設定Viajeros.comで同様のものを、持っているので：

$("#loading_indicator").bind("ajaxSend", function(e){ 
    $(this).show(); 
}).bind("ajaxComplete", function(){ 
    $(this).hide(); 
}).bind("ajaxError", function(){ 
    $(this).hide(); 
}); 

「ajaxSend」、「ajaxComplete」と「ajaxError」イベントはjQueryの内部AJAX呼び出しによってトリガーされます。 http://api.jquery.com/ajaxSend/

Answer 2

ピート、

ユーザーもののこの種のためのローディングgif形式、

は、クリックしたdiv要素の隣にビジーインジケータを追加し、アヤックスが成功した後、それを を削除するか、それがクラスをthrought隠します。

この最もcommpon練習

が

http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html

Answer 3

実際には速いか遅いというパラメタを渡さないと、表示と非表示に問題が発生することがありました。

ので：

$(this).show('slow); 

または

$(this).hide('fast'); 

Answer 4

ただ、この問題全体に自分自身を来ります。私の解決策...

この問題をChromeで回避するには、AJAX呼び出しで1ミリ秒のタイムアウトを使用します。

など。

$("#mySpinningLoader").show(); 

var t = setTimeout(function() { 
    $.ajax({ 
     url: rootPath + controllerNAction, 
     async: false, 
     type: "POST", 
     data: JSON.stringify(lightweightObject), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data, textStatus, jqXHR) { 
      $("#mySpinningLoader").hide(); 
     } 
    }); 
}, 1); 

Answer 5

私は同じ問題がありました。ロードアニメーションはajaxの成功に隠されていませんでした。 jQueryのhide関数に1ミリ秒追加しました。

function test() { 
    $('#loading').show(); 
    $.ajax({ 
     type: "POST", 
     url: "functions.asp", 
     cache: false, 
     crossDomain: false, 
     dataType: "text", 
     data: { action: "getData" }, 
     success: function (data, textStatus) { 
      $('#loading').hide(1); // Added a millisecond 
      // Do some actions 
     }, 
     error: function (xhr, aOptions, rError) { 
      $('#loading').hide(); 
     } 
    }); 
}