TinyMCE Can't load to dynamic ajax content..

**ampera** · 01-12-2010, 09:32 PM

Why TinyMCE can't load to article1.html ?

index.html

Code:

<head>
<script type="text/javascript" src="js/tw-sack.js"></script> 
<script type="text/javascript">
var ajax = new sack();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj	// Reference to article content <div>

function mouseoverArticle()	{
	if(this==clickedArticle)return;
	if(activeArticle && activeArticle!=this){
		if(activeArticle==clickedArticle)
			activeArticle.className='articleClick';
		else
			activeArticle.className='';
		
	}
	this.className='articleMouseOver';
	activeArticle = this;	// Storing reference to this article
}

function showContent(){
	contentObj.innerHTML = ajax.response;	// ajax.response is a variable that contains the content of the external file	
}
function showWaitMessage(){
	contentObj.innerHTML = 'Finding article.....<br>Please wait';
}
function getAjaxFile(fileName){
	ajax.requestFile = fileName;	
	ajax.onCompletion = showContent;	
	ajax.onLoading = showWaitMessage;	
	ajax.runAJAX();			
}
function selectArticle(){
	getAjaxFile(this.id + '.html');	
	if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
	this.className='articleClick';
	clickedArticle = this;
}
function initAjaxDemo(){
	articleListObj = document.getElementById('articleList');
	var articles = articleListObj.getElementsByTagName('LI');
	for(var no=0;no<articles.length;no++){
		articles[no].onmouseover = mouseoverArticle;
		articles[no].onclick = selectArticle;
	}	
	
	contentObj = document.getElementById('contentContainer');
}
window.onload = initAjaxDemo;
</script>

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script> </script> 

<script type="text/javascript"> 
tinyMCE.init({ 
mode : "exact", 
theme : "simple", 
elements : "elm1" 

}); 
</script>

</head> 

<body> 

<div id="mainContainer">
	<div id="contentContainer">
		<h2 class="openingText">Click on one of the articles to the right.</h2>
		<p>This will load the the content of external articles into this DIV</p>
	</div>
	<div id="articleListContainer">
		<ul id="articleList" class="articleList">
			<li id="article1">Textarea with TinyMCE</li> <!-- go to article1.html -->
			<li id="article2">Article2</li>
			<li id="article3">Article3</li>
		</ul>
	</div>
	<div class="clear"></div>
</div>


</body> 
</html>

article1.html

Code:

<textarea id="elm1" name="elm1" style="width:300px;height:250px"></textarea>

dynamic ajax content example: http://dynamic-ajax.extermedia.com/

Please help for the solution...

.

**jscheuer1** · 01-13-2010, 05:53 PM

You have to wait to init the editor until it's markup arrives on the page, that would be here:

Code:

function showContent(){
	contentObj.innerHTML = ajax.response;	// ajax.response is a variable that contains the content of the external file	
}

So I would remove this from your code:

Code:

<script type="text/javascript"> 
tinyMCE.init({ 
mode : "exact", 
theme : "simple", 
elements : "elm1" 

}); 
</script>

because elm1 is not there yet, and modify the first part:

Code:

function showContent(){
	contentObj.innerHTML = ajax.response;	// ajax.response is a variable that contains the content of the external file
	if(document.getElementById('elm1')){  //check for elm1, if present initialize it
		tinyMCE.init({ 
		mode : "exact", 
		theme : "simple", 
		elements : "elm1" 
		}); 
	}
}

However, if tinyMCE cannot deal with its initialized content being removed, then reinserted and reinitialized, there will be problems if the article1 is added, later removed and then added again.

Thread: TinyMCE Can't load to dynamic ajax content..

Thread Tools

Search Thread

TinyMCE Can't load to dynamic ajax content..

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions