0

これを行うための適切な方法/設計はありますか? それとも、それらを 1 つの関数/イベントに結合し、Ajax から返された値に基づく必要がありますか?

私はそのような2つの変更イベント/機能を持つドロップダウンリストを持っています,

$(document).ready(function () {
    $("#ddlFacilityDatabases").change(UpdateCategoriesList).change(UpdateReportsList);
}

どちらの関数も、「#ddlCategories」と「#ddlReports」のオプションを変更します。UpdateCategoriesList() は「#ddlCategories」オプションを変更し、UpdateReportsList() は「#ddlReports」オプションを変更します。

これが私の関数の1つです（ほとんど同一であるため、1つだけを投稿し、場所と名前をいくつか変更するだけです）

function UpdateCategoriesList() {

    // Disable the Dropdown.
    $("#ddlCategories").attr("disabled", true);

    // Get Selection Value.
    var Selection = {
        "FacilityDatabaseName": $("#ddlFacilityDatabases").val()
    };

    // Send JSON to /Select/getCategories/.
    $.ajax({
        url: "/Select/getCategories/",
        type: "GET",
        dataType: "html",
        data: Selection,
        success: function (response, textStatus, jqXHR) {
            // Parse Array.
            var Categories = JSON.parse(response).categories;

            // Clear Categories DropDownList.
            $("#ddlCategories").children("option").each(function () {
                if ($(this).val() != "") {
                    $(this).remove();
                }
            });

            // Add New Categories.
            var length = Categories.length;
            for (var i = 0; i < length; i++) {
                if (Categories[i] != null || Categories[i] != "") {
                    $("#ddlCategories").append("<option value=\"" + Categories[i] + "\">" + Categories[i] + "</option>");
                }
            }
        },
        complete: function () {
            // re-enable dropdownlist
            $("#ddlCategories").attr("disabled", false);
        }
    });
}

問題は、上記のように両方をイベントハンドラーに追加すると実行されますが、両方の関数が実行された後にページがドロップダウンリストを更新することです。2番目は最初の変更に依存しているため、最初のページを更新してから2番目のページを更新する必要があります。

4

3 に答える 3

1

2番目の関数を1番目の関数のAJAXコールバックに追加するだけで、正しい順序で実行されます。

于 2013-01-02T21:41:16.013 に答える
1

これは の完璧な使用例です$.Deferreds。

function UpdateCategoriesList() {
    var deferred = $.Deferreds();
    // ...
    $.ajax({
        // ...
        success: function() {
            // ...
            // Resolve the deferred once all operations are done
            deferred.resolve();
        }   
    });

    // Make sure you return the deferred
    return deferred;
}

これにより、次のことが可能になります。

$("#ddlFacilityDatabases").change(function (){
    // When the deferred is resolved, it will call UpdateReportsList
    UpdateCategoriesList().done(UpdateReportsList);
});
于 2013-01-02T22:23:42.183 に答える
0

あなたの問題は、非同期呼び出しに順序を課したいということだと思います。UpdateReportsListの後に来る必要がある場合UpdateCategoriesListは、2 つのオプションがあります。

オプション 1: Neal が指摘したように、最初の ajax 呼び出し内から 2 番目の関数を呼び出します。

オプション 2: 次のように、非同期ではなく、両方の呼び出しをブロックします。

$.ajax(
    url: ...,
    async: false,
    ...
);

それから電話する

$("#ddlFacilityDatabases").change(function (){
    UpdateCategoriesList();
    UpdateReportsList();
});

全体として、これら 2 つの機能を変更できる場合は、最初のオプションの方が優れていると思います。

于 2013-01-02T21:48:34.457 に答える