Implementing Flickr Style Live Title Edit Using Jquery and Ajax

This year's my last post is Flickr like image title edit using jquery, ajax and PHP. I had presented a tutorial in an easy way to interacting DOM object with jquery.

Sample Database Table Code

image table contains three columns id, title, and images.

CREATE TABLE images
(
id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(200),
imageurl TEXT
);

Javascript Code

Contains javascipt code. $(".save").click(function(){}- save is the class name of SAVE button. Using $(this).parent().parent().attr("id") calling formbox div id value.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
// Title tag
$("h4").click(function() 
{
var titleid = $(this).attr("id");
var sid=titleid.split("title"); // Splitting eg: title21 to 21
var id=sid[1];
var parent = $(this).parent();
$(this).hide();
$("#formbox"+id).show();
return false;
});
// Save Button
$(".save").click(function() 
{
var A=$(this).parent().parent();
var X=A.attr('id');
var d=X.split("formbox"); // Splitting Eg: formbox21 to 21
var id=d[1];
var Z=$("#"+X+" input.content").val();
var dataString = 'id='+ id +'&title='+Z ;
$.ajax({
type: "POST",
url: "imageajax.php",
data: dataString,
cache: false,
success: function(data)
{
A.hide(); 
$("#title"+id).html(Z); 
$("#title"+id).show(); 
}
});
return false;
});
// Cancel Button
$(".cancel").click(function() 
{
var A=$(this).parent().parent();
var X= A.attr("id");
var d=X.split("formbox");
var id=d[1];
$("#title"+id).show();
A.hide();
return false;
});

});
</script>

index.php

Contains HTML and PHP code displaying records form images table.

<?php
include('db.php');
$sql=mysql_query("select id,title,imageurl from images");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$title=$row['title'];
$imageurl=$row['imageurl'];
?>

<div id="formbox<?php echo $id; ?>" style="display:none">
<form method="post" name="form<?php echo $id; ?>">
<input type="text" value="<?php echo $title; ?>" name='content' class='content'/><br />
<input type='submit' value=" SAVE " class="save" />
or
<input type="button" value=" Cancel " class="cancel"/>
</form>
</div>
<h4 id="title<?php echo $id; ?>"><?php echo $title; ?></h4>
<img src="<?php echo $imageurl; ?>" />

<?php } ?>

imageajax.php

Contains PHP code updating the images table title column.

<?php
include("db.php");
if($_POST['id'])
{
$id=$_POST['id'];
$title=$_POST['title'];
$id = mysql_escape_String($id);
mysql_query("update images set title='$title' where id='$id'");
}
?>

CSS Code

h4
{
margin:0px;
padding:0px;
}
h4:hover
{
background-color:#ffffcc;
}
.save
{
background-color:#cc0000;
color:#fff;
padding:4px;
font-size:11px;
border:solid 1px #cc0000;
text-weight:bold;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
.cancel
{
background-color:#dedede;
color:#333;
padding:4px;
font-size:11px;
border:solid 1px #dedede;
-moz-border-radius:5px;-webkit-border-radius:5px;
}