Jquery UI 模式对话框问题与更新面板按钮触发器

Question

我面临一个愚蠢的问题，但很难解决。

我在更新面板中有一个复选框控件。

<asp:UpdatePanel ID="UpdateCheckEdit" runat="server"><ContentTemplate>
<asp:CheckBox ID="ChkEdit" Text="Edit" Enabled="true" onCheckedChanged="ChkEdit_CheckedChanged" Visible="false" AutoPostBack="true" runat="server" />
    <asp:TextBox ID="txtDbInterviewComments" CssClass="user_textarea" TextMode="MultiLine" Visible="false" runat="server" />
    <asp:Button ID="btnEdit" Visible="false" CssClass="create_btn" OnClientClick="javascript: $('#ConfirmDiv').dialog('open');return false;" OnClick="btnEdit_Click" Text="Edit" runat="server" />
</ContentTemplate></asp:UpdatePanel>

在检查更改时，文本框和编辑按钮都可见，一旦点击编辑按钮，就会弹出一个模式对话框，要求确认该框的 div 如下所示。

<div id="ConfirmDiv" title="Confirm">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Do you want to save the changes?<br />These changes CANT be reversed.</p>
</div>

Jquery 的脚本编写为此

<script type="text/javascript">
        $().ready(function () {
            $("#ConfirmDiv").dialog(
            { autoOpen: false,
              modal: true,
              bgiframe: true,
              resizable: false, 
              height: 'auto', 
              open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide();},
              buttons: {'Yes': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnEdit))%>; },'Cancel': function () { $(this).dialog('close'); }}
            })
        });

    </script>

脚本编写在 BODY 标记中，单击“是”按钮会调用“编辑”按钮（btnEdit）的回发事件 在后面

的代码中，一切运行正常，但是执行后模态框仍然显示 向上。我需要在代码执行后关闭此对话框。

如果我删除更新面板，一切都工作得很好，但同一页面上的网格视图中存在一个 HTML 单选按钮列，如果发生完整回发，该列将失去检查。 .

请帮我提供可能的解决方案..

Answer 1

您将面临的主要问题是 document.ready 不会在部分回发时触发。要解决此问题，您可以在名为 PageLoad 的 javascript 函数中更新 jquery 对象：

<script type="text/javascript"> 
    $().ready(function () { 
         // Only happens on first page load, not on partial postbacks
         SetupDialog();
    }); 

    function pageLoad(){
        // Happens on every partial postback
        $("#ConfirmDiv").dialog("close")
    }

    function SetupDialog(){
        $("#ConfirmDiv").dialog( 
        { autoOpen: false, 
          modal: true, 
          bgiframe: true, 
          resizable: false,  
          height: 'auto',  
          open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide();}, 
          buttons: {'Yes': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnEdit))%>; },'Cancel': function () { $(this).dialog('close'); }} 
        })
    }

</script>

我相信它区分大小写。

Answer 2

看，更新面板将清除页面内的所有 jQuery 代码。尝试使用PageRequestManager。