TinyMCE Can't load to dynamic ajax content.. [Archive]

ampera

01-12-2010, 09:32 PM

Why TinyMCE can't load to article1.html ?

index.html

<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> 
<li id="article2">Article2</li>
<li id="article3">Article3</li>
</ul>
</div>
<div class="clear"></div>
</div>

</body>
</html>

article1.html

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

dynamic ajax content example: http://dynamic-ajax.extermedia.com/ (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:

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:

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

});
</script>

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

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.