Home » Tutorials » Edit in place with Scriptaculous and PHP

Edit in place with Scriptaculous and PHP

How to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP.
Step 1: index.php
Create a new blank page, index.php. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The <body> will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.php and add this code into <head> tag:
<script language="javascript" src="scriptaculous/lib/prototype.js"></script>
<script language="javascript" src="scriptaculous/src/scriptaculous.js"></script>

...and add the following code into the <body> tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
ajax_framework.js contains XMLHTTPRequest to use Ajax functionalities and saveText(): function, to save the new value into the database.

/* XMLHTTPRequest Enable */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();

/* -------------------------- */
/* SAVE TEXT */

var nocache = 0;
var text = '';
function saveText(textId){
textId_n = encodeURI(document.getElementById('textId').value);
textIDGlobal = textId_n;
nocache = Math.random();
http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);
http.onreadystatechange = saveTextReply;
http.send(null);
}
function saveTextReply(){
if(http.readyState == 4){
var response = http.responseText;
document.getElementById(textIDGlobal).innerHTML = response;
}

Step 3: save_text.php
save_text.php contains PHP code to save the new value into our database's table (MYTABLE). Copy and paste the following code into the page save_text.php:

<?php include('config.php'); ?>
<?php
if(isset($_GET['newText'])){
$newText= $_GET['newText'];
$insertText_sql = 'INSERT INTO MYTABLE (newText) VALUES('. $newText .')';
$insertText= mysql_query($insertText_sql) or die(mysql_error());
echo $newText;
} else {
echo 'Error! Please fill all fileds!';
}
?>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

source: woork.blogspot