如何关闭JQuery对话框以清除内容

时间:2012-03-05 12:41:05

标签: jquery html events

我希望有人可以告诉我为什么我无法清除不同开放事件之间对话的内容。 首先,我有一个非常简单的页面,其中包含一个更新面板,如下所示。主窗体中唯一的东西是一个链接(“点击我”)来调用对话框打开 open事件处理程序执行异步回发。事件处理程序方法“btn_dialog”后面的代码使用随后显示的值填充对话框的Literal(“litChart”)。一切都很好。我的问题是,当我单击关闭(X按钮),关闭对话框就好了,文字中的内容没有被清除,因为我认为它将在关闭期间和下次单击链接打开对话框时显示我第一次放置的相同文本/控件。我想要的是每次对话关闭时清除内容,这样就不会回忆起以前的内容 我用过$(“div#contentHolder”)。empty();和$(“div#contentHolder”)。dialog(“destroy”)。empty();以及其他各种方式。我认为发生的事情是选择器没有正确引用对话框内容 我是JQuery的新手,不知道从哪里开始。如果有人能帮助我使用经过验证的代码,我真的很感激。

<asp:Content ID="Content1" ContentPlaceHolderID="cph_head" Runat="Server">

 <script type="text/javascript" >
    $(function () {
        $("#dialog_detail").dialog({ autoOpen: false, width: 'auto', 
         open: function (event, ui) { __doPostBack('<%=btn_dialog.UniqueID %>', ''); },
         close: function (event, ui) { $("div#contentHolder").empty(); }
        });
    });
 </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_main" Runat="Server">
  <asp:UpdatePanel ID="up_main" runat="server">
    <ContentTemplate>    
         <span onclick="$('#dialog_detail').dialog('open');">click me</span>
    </ContentTemplate>
   </asp:UpdatePanel>
   <div id='dialog_detail'>
        <asp:UpdatePanel ID="up_dialog" runat="server">
           <ContentTemplate>
              <asp:UpdateProgress runat="server" ID="UpdateProgress1"  
                  AssociatedUpdatePanelID="up_dialog">
                  <ProgressTemplate>
                       <asp:Image ID="postbackAnimation" 
                          ImageUrl="/dashboard/images/ajax-loader.gif" 
                          AlternateText="Loading..." runat="server" />
                  </ProgressTemplate>
               </asp:UpdateProgress>    
               <div id="contentHolder" runat="server">
                  <asp:Literal ID="litChart" runat="server"></asp:Literal>
                </div>   
                <asp:Button ID="btn_dialog" runat="server" style="display:none;" />
             </ContentTemplate>
          </asp:UpdatePanel> 
  </div>
</asp:Content>

下面是填充此代码的代码:

是的,我试过了,事件刚才再次尝试过。问题在于,一旦对话框被销毁,就无法重新打开。有人可以尝试代码,看看他们是否可以得到结果?我有这样的代码:

 Protected Sub btn_dialog_Click(sender As Object, e As System.EventArgs) Handles btn_dialog.Click

    litChart.Text = GetScript("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce")

 Sub End

 Private Function GetScript(ByVal comment As String) As String
    Dim sb As New StringBuilder


    sb.AppendLine("<p style='max-width: 500px; text-align: left;'>")
    sb.AppendLine(comment)
    sb.AppendLine("</p>")
    Return sb.ToString

 End Function

1 个答案:

答案 0 :(得分:0)

你应该销毁它

    $("#dialog_detail").dialog({ autoOpen: false, width: 'auto', 
     open: function (event, ui) { __doPostBack('<%=btn_dialog.UniqueID %>', ''); },
     close: function (event, ui) { $("#dialog_detail").dialog("destroy"); }
    });