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;
}