Intergration fckeditor with AJAX

Hi, I know this issue has been around for ages here, but I have looked through many posts here, and I still cannot find the solution for my fckeditor and ajax problem, here is the simplified code, please let me know if anyone of you know how to get around this.

Many thanks,
Lau

#############

AJAX function

<script>
function getXMLHttpRequestObject()
{
    if(window.XMLHttpRequest) return new window.XMLHttpRequest();
    else if(window.ActiveXObject) return new window.ActiveXObject("Msxml2.XMLHTTP"); 
    else return new window.ActiveXObject("Microsoft.XMLHTTP");
    return 0;
}

function post(form,url,target)
{
var formdata = "";
xmlhttp = getXMLHttpRequestObject();
for (i=0; i < thisform.length; i++)
    {
   if(thisform.elements[i].type == "text")
      { //Handle Textbox's
      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
      }
   else if(thisform.elements[i].type == "textarea")
      { //Handle textareas
      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
      }
   else if(thisform.elements[i].type == "checkbox")
      { //Handle checkbox's
      formdata = formdata + thisform.elements[i].name + "=" + thisform.elements[i].checked + "&";
      }
   else if(thisform.elements[i].type == "radio")
   { //Handle Radio buttons
   if(thisform.elements[i].checked==true)
      {
      formdata = formdata + thisform.elements[i].name + "=" + thisform.elements[i].value + "&";
      }
   }
   else
      {
      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
      }
    }
xmlhttp.onreadystatechange = function()
   {
   var wait = document.getElementById(target);
   wait.innerHTML = '<div id=\"ajax_loader\"><table border=\"0\"><tr><td><img src=\"img_iconies/ajax_loader_search.gif\"> </td><td> Processing... please wait.</td></tr></table><div>';
   if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) 
      {
      var request_response = document.getElementById(target);
      request_response.innerHTML = xmlhttp.responseText;
      }
    }
xmlhttp.open("POST", url);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(formdata);
return false;
}

fckeditor loaded in PHP

</script>
<script type="text/javascript" src="js/fckeditor/fckeditor.js"></script>
<?php include("conn_mysql.inc.php");?>
<?php include("fckeditor.php") ;?>
<?php
$sql_newsletter = "
SELECT *
FROM root_newsletters
ORDER BY nwl_created DESC";       
$result_newsletter = mysql_query($sql_newsletter);
$numRows_newsletter = mysql_num_rows($result_newsletter);
$row_newsletter = mysql_fetch_assoc($result_newsletter);
?>
<form action="" onsubmit="post(this,'post.php','frame');return false;" method="post" enctype="multipart/form-data">
<?php

$val = $row_newsletter['nwl_content'];
$sBasePath = $_SERVER['PHP_SELF'] ;
$sBasePath = substr( $sBasePath, 0, strpos( $sBasePath, "_samples" ) ) ;
$oFCKeditor = new FCKeditor('content') ;
$oFCKeditor->BasePath   = 'js/fckeditor/' ;
$oFCKeditor->Value      = "$val" ;
$oFCKeditor->Create() ;
?>
<input type="submit" name="submit" value="Submit" />
</form>

############

Mon, 02/02/2009 - 03:35

lauthiamkok

Joined: 01/02/2009

Posts: 3

Re: Intergration fckeditor with AJAX

I have found the solution after two testing and searching online.

the only line i need to add into my ajax call is this,

formdata = formdata + 'content=' + escape(FCKeditorAPI.GetInstance('content').GetXHTML()) + "&";

this is the full code.

hope this could be helpful for some other newbies.

best wishes,
Lau

function post(thisform,url,target)
{
//General Purpose Ajax form submitter.
//Written by Carl(bag) @ Thybag.co.uk
// Set up data variable
var formdata = "";
// Set up Ajax request variable
xmlhttp = getXMLHttpRequestObject();
// Loop through form fields
for (i=0; i < thisform.length; i++)
    {
   //Build Send String
   if(thisform.elements[i].type == "text")
      { //Handle Textbox's
      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
      }
   else if(thisform.elements[i].type == "textarea")
      { //Handle textareas
      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
      }
   else if(thisform.elements[i].type == "checkbox")
      { //Handle checkbox's
      formdata = formdata + thisform.elements[i].name + "=" + thisform.elements[i].checked + "&";
      }
   else if(thisform.elements[i].type == "radio")
   { //Handle Radio buttons
   if(thisform.elements[i].checked==true)
      {
      formdata = formdata + thisform.elements[i].name + "=" + thisform.elements[i].value + "&";
      }
   }
   else
      {
      //finally, this should theoretically this is a select box.
      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
      formdata = formdata + 'content=' + escape(FCKeditorAPI.GetInstance('content').GetXHTML()) + "&";
      }
    }

//Send Ajax Request
xmlhttp.onreadystatechange = function()
   {
   var wait = document.getElementById(target);
   wait.innerHTML = '<div id=\"ajax_loader\"><table border=\"0\"><tr><td><img src=\"img_iconies/ajax_loader_search.gif\"> </td><td> Processing... please wait.</td></tr></table><div>';
   //Check page is completed and there were no problems.
   if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) 
      {
      //What to do once the form is submitted - to inform the user.
      //alert("Your form has been successfully submitted");
      var request_response = document.getElementById(target);
      //var userSignature= FCKeditorAPI.GetInstance('content').GetHTML();
      request_response.innerHTML = xmlhttp.responseText;
      }
    }
//Make connection
xmlhttp.open("POST", url);
//Set Headers
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//Send data
xmlhttp.send(formdata);
//stops form from submitting normally
return false;
}