Question

如果单击“添加新”按钮，它将打开一个包含带有编辑和删除按钮的GridView的jQuery对话框其中包含完整的功能代码。如果单击“编辑”按钮，jQuery对话框将消失。我无法编辑。

如果我再次点击“添加新”按钮，则会打开jQuery对话框，其中包含“更新，取消”。

如果单击“编辑”或“删除”按钮，如何防止jQuery对话框立即关闭？

<script type="text/javascript">

  $("[id*=btnPopup]").live("click", function (ev) {
    $("#dialog").dialog({
    title: "Add new",
    width: 1200,
    height: 500,
    modal: true,
    open: function (type, data) {
    $(this).parent().appendTo("form");
      },
     buttons: { 
       Close: function () {
       $(this).dialog('close');
          dialog.parent().appendTo(jQuery("form:first"));
       }
      }             
   });

    return false;
   });

</script>

.aspx file
<div id="dialog" style="display: none">
<asp:GridView ID="gridViewShowVariables" runat="server" ......>
 </asp:GridView>
<div/>
<asp:Button ID="btnPopup" runat="server" Text="`enter code here`Add new item" />

Answer 1

我认为您正在寻找ASP.NET回发模型的一些限制。当您单击按钮时，它会导致回发到服务器，这意味着必须完全重新发送页面，并且您将丢失客户端状态。所以你可以做的是ClientScriptManager.RegisterStartupScript并重新打开对话框，以便在回发后将页面发送回客户端时，对话框将再次打开。

- 更新 -

首先，让我们改变你宣布对话的方式。

$("[id*=btnPopup]").live("click", function (ev) {
    $("#dialog").dialog({
    title: "Add new",
    width: 1200,
    height: 500,
    modal: true,
    autoOpen: false,
    appendTo: "form",
     buttons: { 
       Close: function () {
       $(this).dialog('close');
          dialog.parent().appendTo(jQuery("form:first")); //I think this can be eliminated too.
       }
      }             
   });

然后，当你想打开它时，请执行以下操作：

$("[id*=btnPopup]").live("click", function (ev) {
    $("#dialog").dialog("open");
});

现在，任何时候你的回发，并且你想在回发后让对话框保持打开状态，在服务器端执行此操作：

ClientScriptManager.RegisterStartupScript Method (this.GetType(), "open-dialog", "$('#dialog').dialog('open');", true);

- 结束更新 -

或者，您可以使用UpdatePanel进行部分回发。但是我不推荐那些，因为它们往往会导致比他们解决的更多问题。

我最重要的建议是将GridView关闭到常规表，然后使用AJAX将更新发送回服务器。

Answer 2

您可以使用beforeClose事件来阻止对话框关闭。

$( "#dialog" ).dialog({
    beforeClose: function(){
        if(error == 1){
            alert('error');
            return false;
        } 
    }
});

或者您也可以使用关闭事件：

$(function() {
      $( "#dialog" ).dialog({
          close: function(event,ui){
              $(this).dialog('open');
          }
      });
  });

如果单击“编辑”或“删除”按钮，如何防止jQuery对话框立即关闭？

2 个答案: