如何从jquery ajax调用成功返回时显示JQuery对话框

Question

我在返回ajax调用时显示一个jquery对话框时遇到问题。以下是对话框和支持的html：

function ShowDeleteReturnStatusDialog(deletedId) {
    $("#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');
            }
        }
    });
}

<div id="idDeleteReturnStatusDialog" [email protected] style="display:none;">
    <div class="container" style="border:groove;">
        <div class="row">
            <div class="col-6">
                @Model.StatusDescription
            </div>
        </div>
    </div>
</div>

我能够使用以下按钮测试对话框，并通过jquery从该按钮打开对话框：

<div id="idcontainerTopBtns" style="border:outset; background-color:#e6f7fe;">
    <input type="button" id="idTestBtn" value="Test" class="btn btn-primary" />

        $("#idcontainerTopBtns").on('click', '#idTestBtn', function () {
            ShowDeleteReturnStatusDialog(500);
        });
</div>

尽管对话框是通过单击按钮打开的，但是当我进行ajax调用并尝试在ajax完成后显示它时，它不会打开。下面是ajax调用，该调用定义为在ajax调用返回时打开对话框。问题是对话框未显示在屏幕上：

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) {
            window.location.replace("/PurchaseOrder/Create");
            ShowDeleteReturnStatusDialog(deletedId);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //Process Failure here
        });
};

如何解决，以便在执行ajax调用时显示对话框？预先感谢。

Answer 1

根据Hadi的评论，我对解决问题的代码进行了更改。以下是更改：

下面的ajax通过从.done代码块中删除window.location.replace函数调用进行了修改。

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);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //Process Failure here
        });
};

ShowDeleteReturnStatusDialog函数已通过将window.location.replace调用添加到“确定”按钮区域中进行了修改。它最初位于ajax .done区域：

function ShowDeleteReturnStatusDialog(deletedId) {
    $("#idDeleteReturnStatusDialog").dialog({
        title: 'Purchase Order ID ' + deletedId + ' was deleted.',
        resizable: true,
        height: 250,
        width: 350,
        modal: true,
        autoOpen: true,
        buttons: {
            'Ok': function () {
                window.location.replace("/PurchaseOrder/Create");
                $(this).dialog('close');
            }
        }
    });
}

idDeleteReturnStatusDialog的支持html（如下所示）已从创建视图页面移至编辑视图页面，在该页面中，整个JQuery调用均已开始进行删除过程：

<div id="idDeleteReturnStatusDialog" title="Purchase Order Deleted Notice" style="display:none;">
    <div class="container" style="border:groove;">
        <div class="row">
            <div class="col">
                The purchase order has been deleted.
            </div>
        </div>
    </div>
</div>

Answer 2

请考虑以下代码。

$(function() {
  function redirect(u) {
    if (u == undefined) {
      return false;
    }
    window.location.replace(u);
  }

  function createConfirm(t, c, cb) {
    return $("<div>").html(c).dialog({
      resizable: true,
      height: 250,
      width: 350,
      modal: true,
      autoOpen: true,
      title: t,
      buttons: {
        "Ok": cb
      },
      close: function() {
        $(this).remove();
      }
    });
  }

  $("#idcontainerTopBtns").on('click', '#idTestBtn', function() {
    createConfirm("Delete Purchase Order", "Purchase Order 500 has been deleted.", function() {
      console.log("Ok Clicked");
      $(this).dialog("close");
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="idcontainerTopBtns" style="border:outset; background-color:#e6f7fe;">
  <input type="button" id="idTestBtn" value="Test" class="btn btn-primary" />
</div>

这有点动态。这也允许您通过使用函数内部的回调函数来级联事件。

示例：

  $("#idcontainerTopBtns").on('click', '#idTestBtn', function() {
    createConfirm("Delete Purchase Order", "Purchase Order 500 has been deleted.", function() {
      redirect("/PurchaseOrder/Create");
    });
  });