Calling PHP from Javascript

[phpmaniac]

I need a javascript function that creates an HTML enabled form in a div. If I include PHP code for the HTML editor it doesn't work. How can I make this work?


function htmlForm(){

var form = "<? include('FCKeditor/fckeditor.php');
$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = 'Default text in editor';
$oFCKeditor->Create(); ?>";

$("divname").innerHTML = form;
}

[andreasblixt]

PHP is a server-side script. If JavaScript could execute PHP, anyone could severely compromise your server. It could, depending on security settings, even be possible to wipe the server clean completely.

You can, however, make your JavaScript include file (or your HTML file, if you've put all JavaScript in it) to a .php file instead, which will make PHP parse it when it is requested and return the JavaScript with the actual HTML for the form:

// File: functions.php
function htmlForm() {
var form = '<?php // Hint: Always use <?php instead of <?, because not all
// server configurations support short tags (and will cause
// unexpected behavior)
include('FCKeditor/fckeditor.php');
$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = 'Default text in editor';
$oFCKeditor->Create();
?>'; // Warning: If the Create() method outputs HTML directly, there's
// a chance the HTML will include apostrophes (') which will make
// your JavaScript invalid. You should see if there isn't any way to
// get the HTML as a return value and use the addslashes() function
// on it.

$("divname").innerHTML = form;
}

<!-- File: editor.html -->
<script src="functions.php" type="text/javascript"></script>

[phpmaniac]

Thanks! this is very helpful.

What I also need to do is put default text in the editor when it loads. How would I pass contents of 'pContent' to $oFCKeditor->Value ?



// File: functions.php
function htmlForm() {

var pContent = $("divname").innerHTML;

var form = '<?php
include('FCKeditor/fckeditor.php');
$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = pContent;
$oFCKeditor->Create();
?>'

$("divname").innerHTML = form;
}

[andreasblixt]

You can't. If it's a submitted field, you can retrieve it in PHP using $_POST["content"] (or $_GET["content"] if it's stored in the URL, which it shouldn't be because it's not a constant value.)

If the value has changed since the page loaded or if it isn't part of the submitted form, you can get a reference to the created editor using JavaScript and change its value:
function htmlForm() {
var form = '<?php
include('FCKeditor/fckeditor.php');
$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = pContent;
$oFCKeditor->Create();
?>';

var pContent = $("divname").innerHTML;
$("divname").innerHTML = form;
$("FCKeditor1").innerHTML = pContent; // I have no idea what elements FCKeditor creates,
// so this line will have to be adjusted.
}

If the PHP code processes the content in a way that cannot be replicated in JavaScript, you can do an asynchronous HTTP request (using XmlHttpRequest) which takes certain parameters (such as the pContent variable) and returns the HTML for the form.

[phpmaniac]

Ok, got that to work too.. so far so good. Next I want to submit the editor contents (which is quite a lot of HTML) using AJAX. I suppose using a GET request to pass values has a size limit on the string. Will doing a POST do the trick? Below is what I am using currently and it doesn't transfer most of the HTML. How do I do a POST?


function save()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ; // Get the editor instance that we want to interact with
savecontent = oEditor.GetXHTML( true ) ; // "true" means you want it formatted.

var url = 'saverfi.php?content='+savecontent;

xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}