2

div1 ～ 2 秒かかる可能性があるクリック ハンドラーから Ajax 更新を呼び出すときに、次のような読み込み画面として機能する を表示したいと思います。

var loadingControl;

loadingControl = $("#loading"); // Is initialized after DOM Ready

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
        },
        error: handleAjaxError
    });

    loadingControl.hide();

    e.preventDefault();
});

divは表示されloadingません。clickこれは、ハンドラーが完了するまで DOM が更新されないためだと思われます。あれは正しいですか？

.show()の呼び出し後にDOMdivを更新できるように、このコードを再構築するにはどうすればよい.ajaxですか?

4

1 に答える 1

5

ajax 呼び出しは非同期であるため、コードは引き続き実行されます。したがって、loadingControl.hide()関数は ajax の開始直後に呼び出されます。関数loadingControl.hide();内を移動してみてくださいsuccess。

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
            loadingControl.hide();
        },
        error: handleAjaxError
    });


    e.preventDefault();
});
于 2012-06-24T22:48:59.553 に答える