3

現在、ユーザーが「コメント（X）」を切り替えるたびにサーバーに接続します

ユーザーが「.info.reply」（コメント（X））をクリックするとすぐに、データの読み込みが完了するまでajaxローダーが表示され、その後ローダーが消えるようにしたいと思います。

// Replies - Toggle display of comments
$('.info .reply').click( function() {
    $('.reply', this.parentNode.parentNode).toggle();
    return false;
});

// Load comments
$('.info .reply', this).mousedown( function() {
    var id = $('form #id', this.parentNode.parentNode).val();
    $.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json',
        success: function(data) {
            for (var i in data) {
                // Do AJAX Updates
            }
        }
    });
    return false;
});

これを行うための適切な方法は何ですか？

ありがとう！

4

2 に答える 2

7

基本的に

show（）やfadeIn（）などを使用してマウスダウンで画像を表示し、成功のコールバック内に非表示にします。このような

$('.info .reply', this).mousedown( function() {
    $("#loading-image").show(); // Show the progress indicator
    var id = $('form #id', this.parentNode.parentNode).val();
    $.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json',
        success: function(data) {
            $("#loading-image").hide(); // Hide the progress indicator
            for (var i in data) {
                // Do AJAX Updates
            }
        }
    });
    return false;
});
于 2010-10-16T01:18:13.687 に答える
3

これを行うには、 jQueryBlockUIなどのプラグインを使用できます。電話をかける$.blockUI()前に電話して$.ajaxください。次に、successイベントの最後に、を呼び出します$.unblockUI()。

于 2010-10-16T01:15:05.397 に答える