Member Avatar for Jay-Kandari
Jay-Kandari 0 Newbie Poster

Hey guys,

Was really fed up with this problem .please check it out.

I have a PHP page which calls and retrieves a text from other PHP page. Now using the Normal textarea element the value is showing in the textarea.

Now I wanted that text area to be as WYSIWYG editor for that I used Editor. (although I tried many). The reason for putting this because to give proper HTML formatting to my text.

The Problem with this Editor is the value fetched by the AJAX query is not getting shown in the Editor

Here's the code

<script type="text/javascript">	
	function view_page(){
		overlay();// used to show a modal dialog.
		page_id = document.getElementById('sel').value;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.onreadystatechange=function()
		  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
//Next Line inserts the text into the <textarea name="texts"> named texts.
			document.getElementsByName('texts').item(0).innerHTML = xmlhttp.responseText;

			document.getElementsByName('page').item(0).value = page_id;
			
			overlay();
			
			}
		  }
		xmlhttp.open("GET","get_page_data.php?page_id="+page_id,true);
		xmlhttp.send();
		
		
	}

</script>

.

Here Everything is working fine. The Only problem is that the WYSIWYG editor is not loading the text from the AJAX (.innerTHTML() method).

* Note: if I'm using the normal <textarea> tag then its showing the data perfectly fine. Please help me out with this.

Thank you.

  • 1 Contributor
  • 0 Replies
  • 189 Views

Dani AI

Generated

— The symptom is caused by how nicEdit works: it replaces the original <textarea> with its own editable element and hides the textarea, so directly changing the textarea DOM (for example via innerHTML) will not update the visible WYSIWYG area. The correct approach is to set the editor content through nicEdit’s API rather than trying to mutate the hidden textarea. (wiki.nicedit.com)

Minimal, practical fix:

  • Give the textarea an id (findEditor uses the textarea id, not its name).
  • Make sure the nicEdit instance has been created for that textarea.
  • In the AJAX success handler call the nicEdit instance’s setContent() with the response HTML; call saveContent() if the underlying textarea must be synced before form submission.

Example (inside the XHR success callback):

var html = xhr.responseText;
nicEditors.findEditor('texts').setContent(html);
nicEditors.findEditor('texts').saveContent(); // optional: sync back to the textarea

The API provides both setContent() and saveContent(); setContent writes into the visible editor and saveContent copies the editor contents back into the original textarea (useful before submitting a form). (wiki.nicedit.com)

Troubleshooting notes: ensure nicEdit is initialized before calling findEditor — either initialize on DOM load (bkLib.onDomLoaded / panelInstance / allTextAreas) or run setContent from an editor “add” or post-init callback. Also confirm the AJAX response contains the HTML expected (no double-encoding) and check the browser console for JS errors. If needing more features or long-term support, consider migrating to a maintained editor such as CKEditor or TinyMCE (nicEdit is lightweight but not actively developed). (wiki.nicedit.com)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.