ckeditor fails to load when accessed within jQuery tabs

Posted on 2011-10-14
Last Modified: 2012-05-12
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="" 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

Question by:brianmfalls
    LVL 1

    Accepted Solution

    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

    LVL 1

    Author Closing Comment

    Problem solved.  No other solutions offered.  :)

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now