2

AJAXとjQueryを使用して大きなテキストファイルを読んでいます：

$.ajax({
    type: "GET",
    url: "testing.txt",
    dataType: "text",
    success: function (returnText) {
        $("#viewDescription").text(returnText);
    }
});

次に、リクエストが終了する間、アニメーションGIFでポップアップを表示することを考えました。私は次のコードを使用してこれを行いました：

$("#popup").on("ajaxSend", function () {
    $(this).show();
}).on("ajaxStop", function () {
    $(this).hide();
}).on("ajaxError", function () {
    $(this).hide();
});

<div style="display: none;" id="popup">
    <img src="loading.gif" />
</div>

ポップアップは正しく表示および非表示になりますが、問題は、jQueryAJAX呼び出しの実行中にGIFが停止することです。どのブラウザでも動作しません。何が問題になるのでしょうか？

4

2 に答える 2

0

次のようなことを試してください：

$('#mybtn').on('click', function(e) {
    e.preventDefault();
    $("#popup").show(); // Show the loader
    $.ajax({
        type: "GET",
        url: "testing.txt",
        dataType: "text",
        success: function(returnText) {
            $("#popup").hide(); // Hide on success
            $("#viewDescription").text(returnText);
        },
        error: function() {
            $("#popup").hide(); // Hide on error
        }
    });
});
于 2012-07-11T13:06:24.890 に答える
0 
Try this:
$('#mybtn').on('click', function(e) {
    $.ajax({
        type: "GET",
        url: "testing.txt",
        dataType: "text",
        beforeSend:function(){
             $("#popup").show(); // Show the loader
        },
        success: function(returnText) {
            $("#popup").hide(); // Hide on success
            $("#viewDescription").text(returnText);
        },
        error: function() {
            $("#popup").hide(); // Hide on error
        }
    });
});
于 2012-07-11T13:40:47.893 に答える