Summernote content not update on button click when in a Bootstrap modal

27 Views Asked by At

I'm using Summernote inside a Bootstrap modal and when I try to update/set the innertext (content) on a button click nothing changes - the original content is still displayed.

However, I am able to get the content when I click another button.

You may notice that I haven't got any triggers in my 2nd updatepanel (in the modal). That's because when a add them in and clicked the button the modal disappears. However, the content is updated after clicking the button to (re)show the modal.

Where am I going wrong?

HTML

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <fieldset>
                <div class="row">
                    <div class="col-md-2">
                        <asp:Button ID="Button1" runat="server" Text="Show Modal" OnClick="Button1_Click" />
                    </div>
                </div>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>

    <div id="modEmails" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Email Details</h6>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-1">
                            <asp:Label ID="lblMEMailFrom" runat="server" Text="Mail from" class="myLargeFont" Width="100px"></asp:Label>
                        </div>
                        <div class="col-md-4">
                            <asp:TextBox ID="txtMEMailFrom" runat="server" Width="400px"></asp:TextBox>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-1">
                            <asp:Label ID="lblMEMailTo" runat="server" Text="Mail to" class="myLargeFont" Width="100px"></asp:Label>
                        </div>
                        <div class="col-md-4">
                            <asp:TextBox ID="txtMailTo" runat="server" Width="400px"></asp:TextBox>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-1">
                            <asp:Label ID="lblMESubject" runat="server" Text="Subject" class="myLargeFont" Width="100px"></asp:Label>
                        </div>
                        <div class="col-md-4">
                            <asp:TextBox ID="txtMESubject" runat="server" Width="400px"></asp:TextBox>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-1">
                            <asp:Label ID="Label107" runat="server" Text="Body" class="myLargeFont" Width="100px"></asp:Label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <textarea clientidmode="Static" id="summernote" class="summernote" name="content" runat="server" style="display: none;"></textarea>
                        </div>
                    </div>
                    <br />
                    <asp:UpdatePanel ID="UpdatePanel15" runat="server">
                        <Triggers>
                            <asp:PostBackTrigger ControlID="btnMEAdd" />
                            <asp:PostBackTrigger ControlID="btnMEAddEmail" />
                        </Triggers>
                        <ContentTemplate>
                            <fieldset>
                                <div class="row">
                                    <div class="col-md-1">
                                        <asp:Button ID="btnMEAddEmail" runat="server" Text="Add email" class="myLargeFont" OnClick="btnAddEmail_Click" />
                                    </div>
                                    <div class="col-md-1">
                                        <asp:Button ID="btnMEAdd" runat="server" Text="Add" class="myLargeFont" OnClick="btnMEAdd_Click" />
                                    </div>
                                    <div class="col-md-8">
                                        <asp:Label ID="lblMEResult" runat="server" Text="???"></asp:Label>
                                    </div>
                                </div>
                            </fieldset>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Script

    <script>
    $(document).ready(function () {
    $('.summernote').summernote({
        dialogsInBody: true,
        height: 200,
        width: 800,
        codemirror: {
            theme: 'monokai'
        }
    }).on('summernote.change', function (we, contents, $editable) {
        $(this).html(contents);
    });
    });
</script>

Codebehind (c#)

    protected void btnAddEmail_Click(object sender, EventArgs e)
    {
        string result = System.Web.HttpUtility.HtmlDecode(summernote.InnerText);

        lblMEResult.Text = result;
    }

    protected void btnMEAdd_Click(object sender, EventArgs e)
    {
        summernote.InnerText = "";
        string testtext = summernoteTextTest();
        summernote.InnerText = testtext;
    }

    private static string summernoteTextTest()
    {
        string testText = "<p>This is some text for testing in summernote.</p><p>How does it look?</p>";
        return testText;
    }
0

There are 0 best solutions below