) by jayThis is the Uber-Web 2.0 function of the Year, In Place Editing. This function is mostly associated with Ruby and other 'fluffy' web apps but once you figure out how easy it is to add to an app you'll be amazed.
In this short tutorial I will show you how to add InPlaceEditing to an Unordered List.
This tutorial is built using the Script.aculo.us Library and PHP5.
Most of the examples I found are for Ruby but I did find one other that helped me. Even though this topic has been covered I feel it is my duty to help spread the knowledge.
Demo
Step 1: The SQL
Start by creating a table to hold a list of data in. For this tutorial I have a simple MySQL Data Table that has 4 columns: ID, Name, Description and Updated.
-
CREATE TABLE `tblInLineEdit` (
-
`id` int(11) NOT NULL AUTO_INCREMENT,
-
`name` varchar(20) NOT NULL DEFAULT '',
-
`desc` varchar(250) DEFAULT NULL,
-
`updated` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
-
PRIMARY KEY (`id`),
-
KEY `name` (`name`)
-
) TYPE=InnoDB AUTO_INCREMENT=5 ;
Step 2: The Main Page
Create a file that will display the list.
Add the script.aculo.us library:
-
<!--scriptacilous lib-->
-
<script type="text/javascript" src="scriptaculous/prototype.js"></script>
-
<script type="text/javascript" src="scriptaculous/effects.js"></script>
-
<script type="text/javascript" src="scriptaculous/controls.js"></script>
-
<script type="text/javascript" src="scriptaculous/builder.js"></script>
-
<script type="text/javascript" src="scriptaculous/dragdrop.js"></script>
-
<script type="text/javascript" src="scriptaculous/slider.js"></script>
-
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
Get Some data from the database:
-
<?php
-
-
//open a connection
-
$mysql = new PDO('mysql:host=[SERVER];dbname=[DATABASE]','[USERNAME]','[PASSWORD]');
-
-
//select some data
-
$query =$mysql->prepare("SELECT * FROM tblInLineEdit");
-
-
$query->execute();
-
$i=0;
-
-
//bind it to an Associate Array
-
foreach($query->fetchAll(PDO::FETCH_ASSOC) as $r ){
-
$i++;
-
}
-
$mysql = null;
-
-
?>
Create FORM and and display the list of items:
-
<form action="InPlaceEdit.php" method="GET">
-
<?php
-
if($results != null){
-
echo "<ul class='links'>\n";
-
foreach($results as $item){
-
echo "<li id='item_".$item['id']."'>".stripslashes($item['name'])."</li>\n";
-
?>
-
<script type='text/javascript'>
-
new Ajax.InPlaceEditor('item_<?php echo $item['id'];?>', 'ajaxInPlaceEditFunctions.php',{callback: function(form, value) { return 'name=' + escape(value)+'&id=<?php echo $item['id'];?>'}});
-
</script>
-
<?php
-
}
-
echo "</ul>";
-
}
-
?>
-
</form>
In the foreach we are creating a list of items:
-
echo "<li id='item_".$item['id']."'>".stripslashes($item['name'])."</li>\n";
.
Then we create a JavaScript block for each list item:
Go here a complete explanation of how Ajax.InPlaceEditor.
-
<script type='text/javascript'>
-
new Ajax.InPlaceEditor('item_<?php echo $item['id'];?>', 'ajaxFunction.php',{callback: function(form, value) { return 'name=' + escape(value)+'&id=<?php echo $item['id'];?>'}});
-
</script>
Step 3: The Data Updater
Now create a new file that will perform the data transaction. This file is referenced in the Ajax.InPlaceEditor as ajaxFunction.php.
-
<?php
-
//chack to see if a name and id are in the FROM POST
-
if($_POST['name'] != '' && $_POST['id']){
-
-
//assign the POST data to variables
-
$itemname = $_POST['name'];
-
$itemid = $_POST['id'];
-
//open a DB connection
-
$mysql = new PDO('mysql:host=[SERVER];dbname=[DATABASE]','[USER]','[PASSWORD]');
-
//prepare the SQL UPDATE
-
$query = $mysql->prepare("UPDATE tblInLineEdit SET ".
-
" name = ?,".
-
" updated = ? ".
-
" WHERE id = ?");
-
//execute the UPDATE with the POST Data
-
//kill the connection
-
$mysql = null;
-
-
//echo the name
-
echo $itemname;
-
}
-
?>
And that's it.
Lastly
This is just a quick overview of a very powerful function. This example only deals with existing data not does not get into INSERTING data but if you clever you'll see that not much needs to be tweaked to add a new item to the list.
Comments
Thanks this helped alot!