Hi there,
I am experiencing odd behavior on a page I am trying to use CKEditor on.
What I want to achieve is an Itinerary description is initially rendered (within a DIV) to a normal label. However if the user elects to edit this information, I then hide the original DIV and display the CKEDitor.
(This bit works)
The problem occurs when I try to save the changes, and hide the div in which the editor sits. I basically won't hide ever again. This all works fine if the controls are not in an UpdatePanel, but I really don't want to post back the entire page when the user saves their edited itinerary.
Does anyone have any suggestions, please?
Here is the code (hopefully I have provided enough):
1) First up is the declaration of the two divs (one for display, one for editing), these are in a HTML table (for brevity, I am only posting up the relevant parts of the page):
2) This is the script at the end of the page, where the javascript to hide/show the div's resides:
I am experiencing odd behavior on a page I am trying to use CKEditor on.
What I want to achieve is an Itinerary description is initially rendered (within a DIV) to a normal label. However if the user elects to edit this information, I then hide the original DIV and display the CKEDitor.
(This bit works)
The problem occurs when I try to save the changes, and hide the div in which the editor sits. I basically won't hide ever again. This all works fine if the controls are not in an UpdatePanel, but I really don't want to post back the entire page when the user saves their edited itinerary.
Does anyone have any suggestions, please?
Here is the code (hopefully I have provided enough):
1) First up is the declaration of the two divs (one for display, one for editing), these are in a HTML table (for brevity, I am only posting up the relevant parts of the page):
<tr> <td colspan="6"> <div runat="server" style="color:#000066;" id="divTourItinerary"><asp:ImageButton runat="server" id="editItineraryIMG" ImageUrl="~/images/edit.gif" AlternateText="Edit Itinerary" onclientclick="return showEditItineraryControl()" /><br /> <asp:Label ID="itineraryLBL" runat="server" /> </div> </td> </tr> <tr> <td colspan="6"> <div id="divEditTourItinerary" style="color:#000066;" runat="server"> <textarea id="txtTourItinerary" runat="server" rows="5"></textarea> <asp:ImageButton runat="server" id="saveItineraryIMG" ImageUrl="~/images/save.gif" AlternateText="Save Itinerary" onclientclick="hideEditItineraryControl()" OnClick="SaveUpdatedItinerary" AutoPostback="true" CausesValidation="false"/> </div> </td> </tr>
2) This is the script at the end of the page, where the javascript to hide/show the div's resides:
<script language="javascript" type="text/javascript"> $(document).ready(function() { $('#<%= divEditTourItinerary.ClientID %>').css('display', 'none'); }); function showEditItineraryControl() { $('#<%= updatedItineraryHID.ClientID %>').val(""); $('#<%= divEditTourItinerary.ClientID %>').css('display', 'block'); $('#<%= divTourItinerary.ClientID %>').css('display', 'none'); return false; } function hideEditItineraryControl() { $('#<%= updatedItineraryHID.ClientID %>').val(CKEDITOR.instances.<%= txtTourItinerary.ClientID %>.getData()); CKEDITOR.instances.<%= txtTourItinerary.ClientID %>.destroy(); $('#<%= divEditTourItinerary.ClientID %>').css('display', 'none'); $('#<%= divTourItinerary.ClientID %>').css('display', 'block'); } function applicationLoadHandler() { try { CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"), { customConfig: '/ckeditor/myconfig.js' }); } catch(e){} } Sys.Application.add_load(applicationLoadHandler); </script>
Re: Problem with CKEditor in an update panel
You can't hide it because it is an iFrame and I think there's some browser security thing about hiding frames?
Not 100% on that, but I bet if rather than hiding it you remove it from the DOM that would work.
With that logic, you should also load it only when it is needed, so only call it when the edit button is used for example, the destroy it on save.