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

Posted 2023-05-08

【中文标题】如何在从 jquery ajax 调用成功返回时显示 JQuery 对话框

【英文标题】：How to show a JQuery dialog on successful return from a jquery ajax invocation

【发布时间】：2020-08-13 16:44:58

【问题描述】：

在返回 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" title=@Model.StatusTitle 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 调用时显示对话框？提前致谢。

【问题讨论】：

window.location.replace("/PurchaseOrder/Create"); 是否在显示对话框之前重定向到其他页面？

是的。应用程序显示要删除的记录。当用户单击删除时，屏幕内容将停留在来自不同页面的空白屏幕上。因此，删除来自删除视图，而创建屏幕的空白位于创建视图上。所以删除后，从删除页面的视图切换到删除后新表单的视图。

好吧，这就是你的问题。您是否没有意识到，如果您离开页面（甚至是相同的 url），那么旧页面将不再存在？ （因此该页面上运行的 js 不再运行）。

好的，我明白你在说什么。我认为这是因为对话框的 html 在创建页面视图上，而 jquery 在外部文件中，而不是在加载创建视图页面时它需要的编辑视图页面中。我希望对话框显示在创建视图页面上，这就是我在调用对话框之前加载创建视图的原因。我将更改并测试对话框是否可以在显示编辑视图页面时显示，然后单击确定按钮以加载创建视图页面。我会发布结果

【参考方案1】：

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

通过从 .done 代码块中删除 window.location.replace 函数调用来修改以下 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) 
            ShowDeleteReturnStatusDialog(deletedId);
        )
        .fail(function (jqXHR, textStatus, errorThrown) 
            //Process Failure here
        );
;

通过将 window.location.replace 调用添加到 OK 按钮区域来修改 ShowDeleteReturnStatusDialog 函数。原来是在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>

【参考方案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");
    );
  );