0

有没有合适的方法/设计来做到这一点？或者我必须将它们组合成一个函数/事件并基于从 Ajax 返回的值？

我有一个下拉列表，其中包含两个更改事件/函数，如下所示，

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

这两个函数都会修改“#ddlCategories”和“#ddlReports”上的选项。UpdateCategoriesList() 修改我的“#ddlCategories”选项，UpdateReportsList() 修改我的“#ddlReports”选项。

这是我的功能之一（仅发布一个，因为它们几乎相同，只是更改了几个位置和名称）

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);
        }
    });
}

问题是当我将它们都添加到上面的事件处理程序中时，它会运行它们，但页面会在两个函数运行后更新下拉列表。我需要第一个来更新页面，然后第二个来更新页面，因为第二个取决于第一个的更改。

4

3 回答 3

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，那么您有两个选择。

选项 1：正如 Neal 指出的，从第一个函数的 ajax 调用中调用第二个函数。

选项 2：使两个调用都阻塞，而不是异步，如下所示：

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

然后打电话

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

总的来说，我认为第一个选项更好，如果您可以更改这两个功能。

于 2013-01-02T21:48:34.457 回答