I was wondering if you could help me out? I have a Ckeditor (v 4.7.3) in a bootstrap 4 modal, which is inside an asp update panel. When I try to grab the contents of the editor from my code behind using txtNewTreatmentLongDesc.Text I only get the text originally in the textbox, not the updated text. Also when I try to close the modal the darkened background does not go away.
My aspx markup and my javascript is as follows:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script src="https://cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="row">
<div class="col">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
</Triggers>
<ContentTemplate>
<h2 class="text-center">
Select treatment category</h2>
<asp:DropDownList ID="drpServCats" AutoPostBack="true" OnSelectedIndexChanged="drpServCats_SelectedIndexChanged"
Font-Bold="true" runat="server" CssClass="form-control d-block mx-auto bg-dark">
</asp:DropDownList>
<h3 class="text-center">
Current treatments</h3>
<asp:GridView ID="grdServices" AutoGenerateColumns="false" CssClass="table table-borderless table-responsive-md"
BorderStyle="None" runat="server" AllowPaging="true" OnPageIndexChanging="grdServices_PageIndexChanging"
OnRowDeleting="grdServices_RowDeleting" PagerSettings-Mode="NumericFirstLast">
<Columns>
<asp:TemplateField HeaderText="Treatment name" AccessibleHeaderText="Treatment name">
<ItemTemplate>
<%#Eval("ServiceName") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="Treatment price" HeaderText="Treatment price">
<ItemTemplate>
<%#Eval("ServiceCost") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="Timely link" HeaderText="Timely link">
<ItemTemplate>
<a href='<%# Eval("ServiceTimelyLink") %>' target="_blank">
<%# Eval("ServiceTimelyLink") %></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Treatment Short Description" AccessibleHeaderText="Treatment short description">
<ItemTemplate>
<%# Eval("ServiceShortDescription") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Treatment detailed description" AccessibleHeaderText="Treatment detailed description">
<ItemTemplate>
<asp:Button ID="btnShowHideDesc" runat="server" CssClass="btn-outline-light" Text="Show detailed description"
OnClick="btnShowHideDesc_Click" />
<asp:Panel ID="pnlLnDesc" runat="server" Visible="false">
<%# Eval("ServiceLongDescription") %>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:Button runat="server" Text="Edit" OnClick="LinkButton1_Click" CommandArgument='<%#Eval("ServiceId") %>'
ID="LinkButton1"></asp:Button>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton runat="server" Text="Delete" CommandName="Delete" CausesValidation="False"
ID="LinkButton2"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<input type="button" id="btnAddTreatment" value="Add new treatment" class="d-block mx-auto btn-outline-light"
data-toggle="modal" data-target="#myTreatmentModal" />
<div class="modal text-white bg-dark" id="myTreatmentModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">
Add a new treatment</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col">
<asp:Label ID="lblNewTreatmentName" runat="server" AssociatedControlID="txtNewTreatmentName"
Text="Treatment name"></asp:Label>
<asp:RequiredFieldValidator ID="rqNewTreatmentName" runat="server" ErrorMessage="*"
ForeColor="Red" ValidationGroup="vldNewTreatment" ControlToValidate="txtNewTreatmentName"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtNewTreatmentName" runat="server" CssClass="form-control" TextMode="SingleLine"
ValidationGroup="vldNewTreatment"></asp:TextBox>
<br />
<asp:Label ID="lblNewTreatmentShortDesc" runat="server" AssociatedControlID="txtNewTreatmentShortDesc"
Text="Price"></asp:Label>
<asp:RequiredFieldValidator ID="rqNewTreatmentShortDesc" runat="server" ErrorMessage="*"
ForeColor="Red" ValidationGroup="vldNewTreatment" ControlToValidate="txtNewTreatmentName"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtNewTreatmentShortDesc" runat="server" CssClass="form-control"
TextMode="SingleLine" ValidationGroup="vldNewTreatment"></asp:TextBox>
<br />
<asp:Label ID="lblNewTreatmentPrice" runat="server" AssociatedControlID="txtNewTreatmentPrice"
Text="Treatment price"></asp:Label>
<asp:RequiredFieldValidator ID="rqNewTreatmentPrice" runat="server" ErrorMessage="*"
ForeColor="Red" ValidationGroup="vldNewTreatment" ControlToValidate="txtNewTreatmentPrice"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtNewTreatmentPrice" runat="server" CssClass="form-control" TextMode="SingleLine"
MaxLength="15" ValidationGroup="vldNewTreatment"></asp:TextBox>
<br />
<asp:Label ID="lblNewTreatmentLink" runat="server" AssociatedControlID="txtNewTreatmentPrice"
Text="Timely link"></asp:Label>
<asp:RequiredFieldValidator ID="rqNewTreatmentLink" runat="server" ErrorMessage="*"
ForeColor="Red" ValidationGroup="vldNewTreatment" ControlToValidate="txtNewTreatmentLink"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtNewTreatmentLink" runat="server" CssClass="form-control" TextMode="SingleLine"
MaxLength="2083" ValidationGroup="vldNewTreatment"></asp:TextBox>
<br />
<asp:Label ID="lblNewTreatmentLongDesc" runat="server" AssociatedControlID="txtNewTreatmentLongDesc"
Text="Detailed description"></asp:Label>
<asp:TextBox ID="txtNewTreatmentLongDesc" runat="server" ClientIDMode="Static" CssClass="form-control"
TextMode="MultiLine" Rows="10" ValidateRequestMode="Disabled" ValidationGroup="vldNewTreatment"></asp:TextBox>
<br />
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="container-fluid">
<div class="row">
<div class="col">
<asp:Button ID="btnAddServ" runat="server" CssClass="btn-outline-light mx-auto" OnClick="btnAddServ_Click"
ValidationGroup="vldNewTreatment" Text="Add new treatment" />
<asp:Button ID="btnCancelProdSize" runat="server" Text="Cancel" data-dismiss="modal"
CssClass="btn-outline-light mx-auto" OnClick="btnCancelProdSize_Click" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
// enable plugin
CKEDITOR.plugins.addExternal('base64image', '/ckplugins/base64image-master/', 'plugin.js');
CKEDITOR.plugins.addExternal('autogrow', '/ckplugins/autogrow/', 'plugin.js');
CKEDITOR.plugins.addExternal('dialog', '/ckplugins/dialog/', 'plugin.js');
CKEDITOR.plugins.addExternal('dialogui', '/ckplugins/adialogui/', 'plugin.js');
CKEDITOR.plugins.addExternal('image2', '/ckplugins/image2/', 'plugin.js');
CKEDITOR.plugins.addExternal('imageresponsive', '/ckplugins/imageresponsive/', 'plugin.js');
CKEDITOR.plugins.addExternal('lineutils', '/ckplugins/lineutils/', 'plugin.js');
CKEDITOR.plugins.addExternal('widget', '/ckplugins/widget/', 'plugin.js');
CKEDITOR.plugins.addExternal('widgetselection', '/ckplugins/widgetselection/', 'plugin.js');
CKEDITOR.plugins.addExternal('imageresize', '/ckplugins/imageresize/', 'plugin.js');
CKEDITOR.plugins.addExternal('table', '/ckplugins/table/', 'plugin.js');
CKEDITOR.plugins.addExternal('bt_table', '/ckplugins/bt_table/', 'plugin.js');
CKEDITOR.plugins.addExternal('youtubebootstrap', '/ckplugins/youtubebootstrap/', 'plugin.js');
CKEDITOR.plugins.addExternal('btgrid', '/ckplugins/btgrid/', 'plugin.js');
CKEDITOR.plugins.addExternal('templates', '/ckplugins/templates/', 'plugin.js');
// extraPlugins needs to be set too.
CKEDITOR.replace('<%=txtNewTreatmentLongDesc.ClientID %>', {
extraPlugins: 'autogrow,dialog,dialogui,image2,lineutils,widget,widgetselection,imageresize,table,bt_table,youtubebootstrap,btgrid,base64image'
});
CKEDITOR.config.removePlugins = 'flash,save,print,forms';
CKEDITOR.config.skin = 'prestige,/ckskins/prestige/';
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Content>
And my code to get the updated content and send it to the db is as follows:
else if (btn.Text == "Update treatment info")
{
int srv;
if (int.TryParse(btnAddServ.ToolTip, out srv) == true)
{
string trtName = txtNewTreatmentName.Text;
string trtShDesc = txtNewTreatmentShortDesc.Text;
string trtLnDesc = txtNewTreatmentLongDesc.Text;
string trtPrice = txtNewTreatmentPrice.Text;
if (srvLogic.UpdateTreatmentInformation(srv, txtNewTreatmentName.Text, txtNewTreatmentShortDesc.Text, trtLnDesc, txtNewTreatmentPrice.Text, txtNewTreatmentLink.Text) == true)
{
int cat;
if (int.TryParse(drpServCats.SelectedValue, out cat) == true)
{
//Response.Redirect(Request.RawUrl);
ClientScript.RegisterStartupScript(this.GetType(), "hiding", "$('#myTreatmentModal').modal('hide')", true);
txtNewTreatmentName.Text = "";
txtNewTreatmentShortDesc.Text = "";
txtNewTreatmentPrice.Text = "";
txtNewTreatmentLink.Text = "";
txtNewTreatmentLongDesc.Text = "";
btnAddServ.Text = "Add new treatment";
GetTreatments(cat);
}
}
}
}
I'm a little lost as to what I should do so if you guys could offer any wisdom I'd sure appreciate it.
