Fllicker like title edit using java

Flicker like title edit using java, jquery, jsp, is quite little bit confusing so i am interested to teach you something which i know, i hope you like it.same post you can find it in 9lessons in php

                     Download: click here
java script code:

$(function() 
{

$("h4").click(function() 
{
var titleid = $(this).attr("id");
var sid=titleid.split("title");
var id=sid[1];
var dataString = 'id='+ id ;
var parent = $(this).parent();
$(this).hide();
$("#formbox"+id).show();
return false;
});
 
$(".save").click(function() 
{
var A=$(this).parent().parent();
var X=A.attr('id');
var d=X.split("formbox");
var id=d[1];
var Z=$("#"+X+" input.content").val();
var dataString = 'id='+ id +'&title='+Z ;
$.ajax({
type: "POST",
url: "imageajax.jsp",
data: dataString,
cache: false,
success: function(data)
{
A.hide(); 
$("#title"+id).html(Z); 
$("#title"+id).show(); 
}
});
return false;
});
$(".cancel").click(function() 
{
var A=$(this).parent().parent();
var X= A.attr("id");
var d=X.split("formbox");
var id=d[1];
var parent = $(this).parent();
$("#title"+id).show();
A.hide();
return false;
}); 
});

css code:

#container
{
margin:0 auto;
width:900px;
font-family:Arial, Helvetica, sans-serif;

}
td
{
width:100px;
}
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;
}

database images

 

imageajax.jsp:

<%@page import="java.sql.*"%>
<%
if(request.getParameter("id")!=null)
{
int id=Integer.parseInt(request.getParameter("id"));
String title=request.getParameter("title");
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:flicker");
Statement stmt=con.createStatement();
stmt.executeQuery("update images set title='"+title+"' where id="+id+" ");
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>

databse after update:

your likes, shares make me more happy