• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1184
  • Last Modified:

ckeditor fails to load when accessed within jQuery tabs

My tabs content is being called via ajax.  I think the problem is that the instance of the ckeditor is created once and it doesn't understand what to do the second, third, etc. time through.  How do I change the ckeditor initilization instance so that it will kill the old and create a new one every time the content is called via ajax into the tab?  Is there a 'catch all' that I can use to kill any and all instances of ckeditor any time a new tab is selected?  Thanks.

Below is the template that is called into the tab via ajax:
<cfset services = application.prodServ.getServices()>
<cfset serviceContent = valueList(services.prodServ_html, '|')>
<cfset serviceTitle = valueList(services.prodServ_title, '|')>


	<br class="pullUp" />
	<cfajaxproxy cfc="admin.com.prodServ" jsclassname="jsobj" />
	<script type="text/javascript">

		<!---init function--->
		$(function() {
			var config = {};
		<!---save content function--->
		function saveContent() {
			var index = document.selectService.service.value;
			var content = $( 'textarea.contentEditor' ).val();
			var dsn = '#application.dsn#';
			var cfcAsAjax = new jsobj();
			return false;
		<!---update editor funciton--->
		function updateEditor() {
			var cntntIndx = $('##contentIndex').val();
//			if (cntntIndx != 0) {
//				saveContent();
//			}
			var slctdIndx = document.selectService.service.selectedIndex - 2;
			var cntntTtl = '#jsStringFormat(serviceTitle)#'.split('|');
			var cntntTtl = cntntTtl[slctdIndx];
			var slctdCntnt = '#jsStringFormat(serviceContent)#'.split('|');
			var slctdCntnt = slctdCntnt[slctdIndx];
			$( 'textarea.contentEditor' ).val(slctdCntnt);
	<!---<textarea class="contentEditorX"></textarea>--->

	<div class="sevenSeventySeven">
		<form name="selectService">
			<select name="service" onchange="updateEditor();">
				<option value="">Choose Category to Edit</option>
				<option value=""></option>
				<cfset loopCount = 0>
				<cfloop query="services">
					<cfset loopcount = incrementValue(loopcount)>
					<option value="#services['prodServ_id'][loopcount]#">#services['prodServ_title'][loopcount]#</option>

	<div class="sevenSeventySeven roundShadow" style=" margin-top: 28px;">
		<input id="contentIndex" type="hidden" name="index" value="" />
		<input id="contentTitle" type="text" name="index" value="" readonly="readonly" class="blueTxt" style=" border: none; font-weight: bold; font-size: 12px; " />
		<input type="submit" value="Save Changes" class="saveChanges" onclick="saveContent();" />
		<textarea cols="80" id="contentEditor" class="contentEditor" rows="10"></textarea>

Open in new window

  • 2
1 Solution
brianmfallsAuthor Commented:
Place the following code before the ckeditor init configuration and you are golden!

var o=CKEDITOR.instances['contentEditor'];
if (o) o.destroy();

Open in new window

brianmfallsAuthor Commented:
Problem solved.  No other solutions offered.  :)

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now