如何解决jQuery Ajax请求成功后无法显示对话框的问题？

你遇到的核心问题其实很直观：在Ajax请求的.done()回调里，你先执行了window.location.replace("/PurchaseOrder/Create")——这行代码会立即触发页面跳转，后面的ShowDeleteReturnStatusDialog(deletedId)完全没机会执行，页面都刷新跳转了，对话框自然没法显示。

修正方案（两种可选） #

方案1：先显示对话框，用户确认后再跳转 #

如果你的需求是先提示用户删除成功，等用户点击"Ok"后再跳转到创建页面，需要把跳转逻辑移到对话框的按钮回调里：

function deletePurchaseOrder() {
 var purchaseOrderId = getPurchaseOrderId();
 event.preventDefault();
 var sToken = document.getElementsByName("__RequestVerificationToken")[0].value;
 $.ajax({
 url: '/PurchaseOrder/PurchaseOrderDelete',
 type: "POST",
 contentType: "application/x-www-form-urlencoded",
 data: { '__RequestVerificationToken': sToken, 'id': parseInt($(this).attr("title")), 'purchaseOrderId': purchaseOrderId }
 })
 .done(function (deletedId) {
 // 调用对话框时传入是否需要跳转的标记
 ShowDeleteReturnStatusDialog(deletedId, true);
 })
 .fail(function (jqXHR, textStatus, errorThrown) {
 // 处理失败逻辑
 });
};

// 修改对话框函数，整合跳转逻辑
function ShowDeleteReturnStatusDialog(deletedId, needRedirect) {
 $("#idDeleteReturnStatusDialog").dialog({
 title: 'Purchase Order ID ' + deletedId + ' was deleted.',
 resizable: true,
 height: 250,
 width: 350,
 modal: true,
 autoOpen: true,
 buttons: {
 'Ok': function () {
 $(this).dialog('close');
 // 用户确认后执行跳转
 if (needRedirect) {
 window.location.replace("/PurchaseOrder/Create");
 }
 }
 },
 // 关闭对话框后销毁实例，避免重复初始化异常
 close: function() {
 $(this).dialog("destroy");
 }
 });
}

方案2：移除跳转语句，仅显示对话框 #

如果你的需求是删除成功后留在当前页面，只显示提示对话框，直接删掉跳转代码即可：

.done(function (deletedId) {
 // 移除跳转语句，直接调用对话框
 ShowDeleteReturnStatusDialog(deletedId);
})

额外提示 #

• 确保对话框的DOM元素#idDeleteReturnStatusDialog在目标页面（如果跳转的话）不存在时，不要在跳转后尝试调用对话框——这也是方案1把跳转放到按钮回调的原因。
• 每次关闭对话框后销毁实例，可以避免重复初始化导致的各种奇怪问题。

内容的提问来源于stack exchange，提问作者Robertcode