/    Sign up×
Community /Pin to ProfileBookmark

Help… editor that is loaded with ajax does not work

I want to put the editor NicEditor when loaded with ajax. But the code below does not work. I use the Chrome browser and when the check element, error message is “uncaught TypeError: Can not call method ‘appendChild’ of null”.
This code runs for the div element “myNicPanel”. But do not run to “myNicPanel2”.

What should I do?

This is the main page (index.php):

[CODE]
<script type=”text/javascript” src=”ajax.js”></script>
<script type=”text/javascript” src=”http://js.nicedit.com/nicEdit-latest.js”></script>
<script type=”text/javascript”>
//<![CDATA[
bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel(‘myNicPanel’);
myNicEditor.addInstance(‘myInstance1’);
});

function editProcess(sourcefile , div_to_replace)
{
var url= sourcefile;

ambilData(url,div_to_replace);

loadNicEditMe();

function loadNicEditMe()
{

var myNicEditor2 = new nicEditor();
myNicEditor2.setPanel(‘myNicPanel2’);
myNicEditor2.addInstance(‘myInstance2’);

}

}

</script>

<div id=”sample”>

<div id=”myNicPanel” style=”width: 525px;”></div>
<div id=”myInstance1″ style=”font-size: 16px; background-color: #ccc; padding: 3px; border: 5px solid #000; width: 400px;”>
You can edit here …
</div>
</div>

<br/>
<br/>

<div id=”editthis”>
This text should be in edit mode with NicEditor above this text when I click the button below
<input type=”button” value=”Click Me” onClick=”editProcess(‘edit.php’,’editthis’);” />
</div>
[/CODE]

This is the page that will replace into #editthis (edit.php):

[CODE]
<div id=”myNicPanel2″ style=”width: 525px;”></div>
<div id=”myInstance2″> Edit This </div>
[/CODE]

And this is the Ajax (ajax.js):

[CODE] var xmlHttp = buatObjekXmlHttp();

function buatObjekXmlHttp()
{
var obj = null;
if (window.ActiveXObject)
obj = new ActiveXObject(“Microsoft.XMLHTTP”);
else
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();

// Cek isi xmlHttp
if (obj == null)
document.write(
“Browser tidak mendukung XMLHttpRequest”);
return obj;
}

function ambilData(sumber_data, id_elemen)
{
if (xmlHttp != null)
{
var obj = document.getElementById(id_elemen);
xmlHttp.open(“GET”, sumber_data, true);

xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == 4 &&
xmlHttp.status == 200)
{

obj.innerHTML = xmlHttp.responseText;

}
}

xmlHttp.send(null);
}
}
[/CODE]

Please help…

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @kansoba spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...