带有更新面板按钮触发器的 Jquery UI 模式对话框问题答案

【问题标题】：Jquery UI modal dialog issue with update panel button trigger带有更新面板按钮触发器的 Jquery UI 模式对话框问题
【发布时间】：2011-10-11 23:53:47
【问题描述】：

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

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

<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标签写的，点击Yes按钮会调用Edit按钮(btnEdit)的回发事件

在后面的代码中一切运行良好，但执行后模态框仍然显示。我需要在执行代码后关闭此对话框..

如果我删除更新面板，一切正常，但在同一页面的网格视图中存在一个 HTML 单选按钮列，如果发生完整回发，它会失去检查..

请帮我找出可能的解决方案..

【问题讨论】：

标签： c# asp.net jquery-ui postback jquery-ui-dialog

【解决方案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>

我认为它区分大小写。

【讨论】：

我不明白如何格式化此评论以使其看起来正确 :( 抱歉，如果它看起来很糟糕。我在页面加载中使用字符串构建器编写了 Javascript，sb。在按钮中按如下方式调用它单击事件，现在不显示弹出窗口本身....... if (!ClientScript.IsStartupScriptRegistered("JSScript")) ScriptManager.RegisterStartupScript(btnEdit, this.GetType(), "JSCR", sb.ToString( ), 假);
如果我不清楚，我很抱歉。 pageLoad 函数实际上是一个 javascript 函数，asp.net ajax 在部分回发时触发（这是自动连接的，所以如果定义函数并将代码放入其中，您需要做的所有事情）。您在 $().ready({...}); 中的代码应移至函数 pageLoad(){...}。您不需要在代码隐藏中加载 javascript。

【解决方案2】：

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

【讨论】：