Question

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

我在更新面板中有一个Checkbox控件..

<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按钮单击调用“编辑”按钮的回发事件（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。

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

2 个答案: