1

関数にラップされた比較的単純な jQuery AJAX 呼び出しがあり、エラー機能をテストしています。私が直面している問題は、AJAX 呼び出しが速すぎることです。「H6」要素と「.loading」要素が繰り返され始めています。私が必要とする動作は、要素を削除してから ajax を呼び出すことです。

function getAvailability(form) {
    var str = $(form).serialize(),
    warning = $('#content h6');

    if ( warning.length > 0 ) {
        $(warning).remove();
        $('<div class="loading">Loading&hellip;</div>').insertAfter(form);
    }
    else
    {
        $('<div class="loading">Loading&hellip;</div>').insertAfter(form);
    }

    $.ajax({
        type: "POST",
        url: "someFile",
        data: str,

        success: function(calendar) {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $(calendar).insertAfter(form).hide().fadeIn();
            });
        },
        error: function() {
            $('.loading').fadeOut(function() {
                $('<h6>Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form);
            });
        }
    });

    return false;
}

私はそれを次のように並べたいと思います->ページから「警告」を削除し、.loadingを追加します。次に、AJAX をトリガーします。次に、.loading をフェードアウトし、成功に応じて警告/カレンダーを追加 & フェードインします。

元のコードを修正し、関数が期待どおりに動作するようになりました。これは主に、ajax プロセス中に送信ボタンを無効にしたためです。

function getAvailability(form) {
    var str = $(form).serialize(),
    btn = $('#property_availability');

    // Disable submit btn, remove original 'warning', add loading spinner
    btn.attr("disabled", "true");
    $('.warning').remove();
    $('<div class="loading">Loading&hellip;</div>').insertAfter(form);

    $.ajax({
        type: "POST",
        url: "public/ajax/returnAvailability1.php",
        data: str,

        success: function(calendar) {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $(calendar).insertAfter(form).hide().fadeIn();
            });
        },
        error: function() {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $('<h6 class="warning">Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form);
                btn.removeAttr("disabled");
            });
        }
    });

    return false;
}

私は、fadeOut() 関数によって作成された時間遅延が原因で、元のシーケンスが期待どおりに機能していなかったと考えています。

4

2 に答える 2

2

を追加して削除する代わりに、warningajaxStart と ajaxStop を利用して表示/非表示を行うだけではどうですか?

warning.ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).fadeOut();
});
于 2013-04-05T15:21:30.750 に答える
0

イベントを順序付けする必要がある場合は、jQuery.ajax API の一部である deferred メソッドと promise メソッドを使用してみてください。この記事はそれらをうまく紹介しています: http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html

于 2013-04-05T15:16:50.340 に答える