当一个控件上的两个事件依赖于另一个控件的更改时，我该如何正确地处理这两个事件？
当一个控件上的两个事件依赖于另一个控件的更改时，我该如何正确地处理这两个事件？
提问于 2013-01-03 05:38:03
有没有合适的方式/设计来做这件事？或者我必须将它们组合到一个函数/事件中，并将它们基于从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);
}
});
}问题是，当我像上面那样将它们都添加到事件处理程序中时，它会运行它们，但页面会在这两个函数运行后更新下拉列表。我需要第一个更新页面，然后第二个更新页面，因为第二个依赖于第一个的更改。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-03 05:48:34
我认为您的问题在于您希望对异步调用进行排序。如果必须在UpdateCategoriesList之后使用UpdateReportsList，那么您有两个选择。
选项1:正如Neal指出的，从第一个函数的ajax调用中调用第二个函数。
选项2:使两个调用都阻塞，而不是异步，如下所示：
$.ajax(
url: ...,
async: false,
...
);然后调用
$("#ddlFacilityDatabases").change(function (){
UpdateCategoriesList();
UpdateReportsList();
});总体而言，我认为第一个选项更好，如果您可以更改这两个函数。
Stack Overflow用户
发布于 2013-01-03 05:41:16
只需将第二个函数添加到第一个函数的AJAX回调中，它就会以正确的顺序运行。
Stack Overflow用户
发布于 2013-01-03 06:23:42
这是$.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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14129594
复制相关文章
相似问题
腾讯云开发者
