После закрытия ModalPopup jQuery перестает работать - PullRequest
Новая
       7

После закрытия ModalPopup jQuery перестает работать

1 голос
/ 26 июля 2011

Сценарий
В качестве части страницы «Просмотр кейса» должна быть функция добавления новой заметки к регистру.
Примечание к делу может быть «видимым извне» с возможностьюпредоставить другой «внешний» текст.

Я использовал ModalPopupExtender из ASP.NET Ajax Control Toolkit, который срабатывает при нажатии кнопки «Добавить заметку», чтобы отобразить панель стекстовое поле для ввода новой заметки.Под текстовым полем есть CheckBox, который пользователь может отметить, если заметка доступна извне.

Когда отмечен галочкой, должен запускаться некоторый jQuery, который исчезает в поле «public note content» и предварительно устанавливает егок значению текстового поля «примечание содержание».

После ввода публичного текста пользователь должен нажать «Сохранить заметку».Заметка записывается в базу данных, 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

1 Ответ

2 голосов
/ 26 июля 2011

Вместо непосредственного использования $(".chkAvailExternally").click( используйте $(".chkAvailExternally").live("click",function(){..

Подробнее об этом здесь и здесь .В основном, во второй раз для модального всплывающего окна, элементы больше не являются частью DOM, поэтому вам необходимо прикрепить обработчик событий для них.

Обновление: после прочтения некоторых статей, возможно, вам будет лучшеиспользуя delegate вместо live, чтобы уменьшить область.Подробнее здесь .

...