Today's lesson explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP (you have to download Scriptaculous framework here).
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>
<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>
<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;
}
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:
<!-- Include Database connections info. -->
<?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!';
}
?>
<?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.
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
this is sexy! thank you!
wew... awfull
thx for sharing... ;)
nice
Could yo be more specific about how to place these files in the site file structure? I have created all the files you talk about, and doesn't seem to work.
I guess this is an advanced tutorial. I've never used AJAX before, so I guess I'm missing something you're taking for granted, right?
gracias!
I did all this tutorial, but when I run the script and click on "save" all it shows is "saving...".
Could you please tell me what am I doing wrong? I'm really interested because of the option of saving changes in the database.
Hi Lupetti!
You could simplify this, in fact you are adding non necessary javascript functions.
You only need to include the scriptaculos at the head and have your php file that store modifications in the database, in my example bellow I'll use save.php
<div id="unique_id">This is my text to modify with edit in place</div>
<script type="text/javascript">
new Ajax.InPlaceEditor('unique_id', 'save.php', {
callback: function(form, value) {
return 'name=' + escape(value)+'&id=unique_id'
}
});
</script>
Just like that, easy!
SUPERB!!!
how does one handle new line characters.
Typically, I save the new lines in the database table, and when I display the data I replace the new lines with BR tags.
So, how do you process the text before displaying it?