「お待ちください」のアニメーションがjQueryで読み込まれていません

I got this image to tell people that some action is loading: http://problemio.com/img/ajax-loader.gif

次に私はこのdivをページに表示してそれを表示します:

<div id="loading">
  
Please Wait

</div>

それから私はそれのためにこのCSSを入れた:

#loading 
{ 
    display:none; 
}

それから私のjQueryで私はこれを行う:

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

しかし、レンダリングされません。私が間違ってやっていることや、なぜそれが現れないのか、どんな考えですか?

Here is a page example where this is supposed to happen: http://www.problemio.com/problems/problem.php?problem_id=216

ありがとう!

1
@BookOfZeusコードはすべてview-sourceにあります。ログインする必要がある場合は、testing @ problem/test
追加された 著者 GeekedOut,
もっとコードを教えていただけますか?
追加された 著者 Book Of Zeus,

2 答え

コードのどこかに問題があります。 javascript:$( "#loading")。show(); をブラウザのアドレスバーに入力すると、divの罰金が表示されます。あなたのJSコードを文書の最後に移動して(必要な箇所にセミコロンがあることを確認してください)、コードを3回確認してください。

具体的には、 /auth/check_login.php へのAJAXリクエストが成功コールバックを起動していない場合は、完全コールバックを使用してみてください。

1
追加された
私はちょっと混乱しています。私は、show_login.php呼び出しが、それ以前のshow()呼び出しが問題ではないと思っていました。
追加された 著者 GeekedOut,
ああ、あなたは正しいのです...しばらくの間、それはcheck_loginコールの中にありました:(
追加された 著者 GeekedOut,
ああ、ちょうど呼び出しの外に置いたが、まだレンダリングされていない:(
追加された 著者 GeekedOut,

Google Hromeでのテスト(デベロッパーコンソールで$( "#loading")。show();を実行しても問題ありません)。

要素がページの下部に配置され、表示されないことがありますか?

それが問題なら、あなたのCSSに次のスタイルを適用してみてください

#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #fff;
  border: 1px solid #aaa;
  padding:0 20px;
}

また、ブロックの外観のロジックを次のように変更する必要があります

  • Show the loader immediately when the user clicks a link that triggers an ajax call
  • Do the ajax call
  • Ajax call gets completed (error or success)
  • Hide the loading div
  • Continue with the error/success handler

    $('#add_attempted_solution').bind('submit',function() {
    
    // pre ajax call code
    
    $("#loading").show();
    $.ajax({
        type: "POST",
        url: "/auth/check_login.php",
        dataType: "json",
        success: function(data) {
            $("#loading").hide();
    
           //success handling
            ......
            ....
        },
        ...
        error: function() {
            $("#loading").hide();
    
           //error handling
            ....
            ...
        }
        ...
    })
    

    }

1
追加された
私は配置が問題かもしれないと思うが、それはHTMLのどこにあってもスクリーンの真ん中にあるapprarのようなものではないのだろうか?
追加された 著者 GeekedOut,
ああ、それは今表示されます - リンクを見てください。しかし、jsをAJAX/jQueryに表示させるにはどうすればいいですか? :)
追加された 著者 GeekedOut,
ああ、私はコードのロジックを変更しました....その新しいCSSを試してみよう
追加された 著者 GeekedOut,
あなたは何が起きているのかを知っていますが、画像は表示されていますが、1秒間隔で表示され、AJAXの読み込みに数秒かかる間に消えます。なぜそれが起こっているのか知っていますか?
追加された 著者 GeekedOut,
それはAJAX呼び出しの非同期性と関係がありますか?まだ考えているようだが、機能の終わりにはかなり早く到達する。
追加された 著者 GeekedOut,
いいえ、実際はありません。
追加された 著者 GeekedOut,
何らかの理由で、関数全体が$( '#solutions')の前で終了すると思います。ラインは本当に終わる。
追加された 著者 GeekedOut,
更新された回答を確認する
追加された 著者 vinilios,
#loading divをエラー/成功ajaxコールバック内以外のどこにも隠していますか?
追加された 著者 vinilios,
クリックイベントのための関数を意味するならば、それはもちろんです。しかし、ajax呼び出しが終了すると、ajaxエラー/成功コールバックが呼び出されます。 gfxmonk.net/2010/07/ 04 /&hellip;
追加された 著者 vinilios,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript