2011-07-26 138 views
1

方案
作为“查看案例”页面的一部分,应该是添加一个新的案例笔记的功能。
可以通过选项提供不同的“外部”文本,从而可以“从外部看到”案例说明。ModalPopup关闭后,jQuery的停止工作

我所做的是使用ASP.NET AJAX控件工具包中的ModalPopupExtender,当点击'添加注释'按钮时触发,以显示带有文本框的面板以输入新注释。在文本框下面有一个CheckBox,如果该注释在外部可用,用户可以打勾。

当打勾时,一些jQuery应该会触发,这会在“公共笔记内容”框中淡出并将其预先设置为“笔记内容”文本框的值。

输入公共文本后,用户应点击“保存注释”。笔记被写入数据库,笔记的GridView被反弹并且ModalPopup隐藏。

jQuery被引用一次,如Page_Load所示。

ScriptManager.RegisterClientScriptInclude(Me, Me.GetType, "BensJQuery", Page.ResolveUrl("~/include/BensJquery.js")) 

问题:
用户可能再要添加第二个音符。他们再次单击“添加注释”,ModalPopupExtender再次显示模式弹出。这一次,如果他们点击'可用的外部'复选框,jQuery不会触发。公共笔记内容区域不显示。测试alert()不显示。

如果用户单击“取消”并且实际上并未添加备注,则会发生同样的问题。 ModalPopup会消失,但如果他们试图随后添加一个音符,他们就无法正确使用它。

标记

<asp:UpdatePanel ID="updNotes" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <asp:GridView ID="gvNotes" runat="server" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" Width="100%"> 
      <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" /> 
      <Columns> 
       <asp:BoundField HeaderText="Date" DataField="CreationDate" /> 
       <asp:BoundField HeaderText="Author" DataField="CreatedBy" /> 
       <asp:BoundField HeaderText="Note" DataField="Text" ItemStyle-Width="80%" /> 
      </Columns> 
     </asp:GridView>         

     <p><asp:Button ID="btnAddNewNote" runat="server" Text="Add note" CssClass="addButton" CausesValidation="false" /></p> 

     <asp:Panel ID="pnlNewNote" runat="server" GroupingText="New note" style="display: none;" CssClass="mdlPopupPanel"> 
      <p>To add a new note, enter the note information here and click 'Add note'</p> 

      <scc:TextBox runat="server" ID="txtNewNoteContent" TextMode="MultiLine" CssClass="mainNoteContent input" 
      Rows="6" Width="75%" Label="Text" ValidationGroup="NewNote" /> 

      <p> 
       <asp:CheckBox ID="chkMakeAvailExternally" CssClass="chkAvailExternally" runat="server" /> 
       <asp:Label runat="server" Text=" Note is available to public" AssociatedControlID="chkMakeAvailExternally" /> 
      </p> 

      <div class="publicNoteContent" style="display: none;"> 
       <scc:TextBox ID="txtPublicNoteContent" runat="server" Label="Text to show to public" 
       TextMode="MultiLine" Rows="6" Width="75%" CssClass="publicNoteContent input" Required="false" /> 
      </div> 

      <p> 
       <asp:Button ID="btnSaveNote" runat="server" CssClass="confirmButton" Text="Save note" ValidationGroup="NewNote" /> 
       <asp:Button ID="btnCancelAddNote" runat="server" CssClass="cancelButton" Text="Cancel" CausesValidation="false" /> 
      </p> 

     </asp:Panel>  
     <act:ModalPopupExtender ID="mpopNewNote" runat="server" TargetControlID="btnAddNewNote" PopupControlID="pnlNewNote" /> 

    </ContentTemplate> 
</asp:UpdatePanel> 

jQuery的

$(document).ready(function() { 
    $(".chkAvailExternally").click(function (event) { 
     alert('test'); // This alert displays for the first note added but not subsequent notes 

     var publicNoteDiv = $(this).parent().parent().find('div.publicNoteContent'); 

     if (publicNoteDiv.is(":visible")) { 
      publicNoteDiv.fadeOut(); 
     } 
     else { 
      var existingText = publicNoteDiv.parent().find('textarea.mainNoteContent').text(); 
      if (publicNoteDiv.find('textarea.publicNoteContent').text() == '') { 
       publicNoteDiv.find('textarea.publicNoteContent').text(existingText); 
      } 
      publicNoteDiv.fadeIn(); 
     } 
    });  
}); 

代码隐藏

Protected Sub btnSaveNote_Click(sender As Object, e As System.EventArgs) Handles btnSaveNote.Click 
    Dim CaseRef As String = Request("CaseReference") 
    Using ctx As New CAMSEntities 
     Dim c As [Case] = ctx.Cases.Single(Function(x) x.Reference = CaseRef) 

     c.AddNote(txtNewNoteContent.Text, chkMakeAvailExternally.Checked, txtPublicNoteContent.Text) 

     ctx.SaveChanges() 

     gvNotes.DataSource = c.Notes.OrderByDescending(Function(x) x.CreationDate).ToList 
     gvNotes.DataBind() 

     txtNewNoteContent.Text = String.Empty 
     chkMakeAvailExternally.Checked = False 
     txtPublicNoteContent.Text = String.Empty 
    End Using 
End Sub 

回答

2

而不是直接使用$(".chkAvailExternally").click(的,使用$(".chkAvailExternally").live("click",function(){.

阅读关于它herehere。基本上第二次模式弹出,元素不再是DOM的一部分,所以你必须附加一个事件处理程序。

更新:在阅读了更多内容之后,或许您最好使用delegate而不是live来缩小范围。更多信息here