0

WebアプリケーションでJQuery1.8.1を使用しています。display a loader iconajax-requestが完了するまでdivにとどまるポップアップを表示しようとしています。

表示される画像はalready loaded and present (hidden) on the main pageです。

<img id="myLoader" alt="" src="images/throbber.gif" style="display: none;"/>

ポップアップを表示するリンクをクリックすると、ローダーアイコンがポップアップdivに配置されます。divは、ajaxリクエストが完了すると受信したデータで上書きされます。

$('a#popup').click(function(event){
        event.preventDefault();
        displayPop();
        $('div#popupdiv').html($('img#myLoader').show());
        $.ajax({
            url: 'someURL',
            type: 'POST',
            data: data,
            dataType: 'json',
            contentType: 'application/json'
        }).success(function(data){
             $('div#popupdiv').html(data);
        });
});

一度だけ動作します。そして、他のすべての$('a#popup')呼び出しについては、その空白です。firebugからのデバッグで、それが最初の呼び出しで$('img#myLoader')返されるのを見ましたが、残りは返されます。クライアントサイドコーディングの初心者として、私は何が起こっているのかを把握することができません。Object[img#myLoader images/throbber.gif]Object[]

ajaxリクエストが完了する前に、ポップアップdivにローダーアイコンを表示するにはどうすればよいですか？ローダー自体にajaxリクエストを使用したくありません。ご意見をお聞かせください。

4

3 に答える 3

0

私も同じ問題を抱えていました。問題は、jQuery関数htmlをjQueryオブジェクトに適用することです$('div#popupdiv').html($('img#myLoader'))。この操作の後、オブジェクトは非常に奇妙に動作しました。htmlメソッドは。でのみ使用できることがドキュメントで明確にされていますhtmlString。append代わりに使用することで問題を解決できると思いますhtml（これはで動作しjQueryます）。私はこのようなことを提案することができます：

var imgLoader = $('img#myLoader').show().remove();

$('a#popup').click(function(event){
    event.preventDefault();
    displayPop();
    $('div#popupdiv').append(imgLoader.clone());
    $.ajax({
        url: 'someURL',
        type: 'POST',
        data: data,
        dataType: 'json',
        contentType: 'application/json'
    }).success(function(data){
         $('div#popupdiv').html(data);
    });

}）;

于 2013-03-08T08:44:12.537 に答える
0

あなたの仕事をするあなたが扱うことができる2つのイベントがあります

beforeSend: function () {
        loading();
    },

読み込み時に読み込みの画像を表示します

complete: function () {
     //here you disable that loading image.
    }

その他のイベントについては、api.jquery.com/jquery.ajaxを参照してください。

于 2013-03-08T07:35:37.390 に答える
0

リンクにIDの代わりにクラスを使用してみましたか？

また、私は移動します：

event.preventDefault();

関数の最後まで。

于 2013-03-08T08:01:55.137 に答える