Update a Record with Animation effect using JSP and jQuery

I received a lot of requests about integration of JQuery and Ajax with Java (JSP). After long time again I'm working on JSP. I prepared a tutorial to update a record with animation effect using jQuery and JSP. Its very simple example contains some lines of Java and HTML code.

 Download Script     Live Demo

Note: Live Demo in PHP hosting

insert.jsp Contains javascript and HTML code update button with class "update_button" and textarea with id "content". When a user click update button the new message is display to top of the ol timeline list with an id "update" with an animated slide Down effect with jQuery and Ajax.

If you want fadeIn effect just replace the code "slideDown" to "fadeIn"

1) insert.jsp code:

<%@ page language="java" import="java.sql.*" errorPage="" %>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".update_button").click(function() {

var boxval = $("#content").val();
var dataString = 'content='+ boxval;

if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> 
<span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "demo.jsp",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
$("#content").value('');
$("#content").focus(); $("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code

<div>

<form method="post" name="form" action="">

<h3>What are you doing?</h3>

<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >

</textarea><br />

<input type="submit" value="Update" name="submit" class="update_button"/>

</form>
</div>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>

2) demo.jsp code:
Contains simple java code, here "egglabs" mysql database name.

<%@ page language="java" import="java.sql.*" errorPage="" %>

<%

String content=request.getParameter("content");
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con =
DriverManager.getConnection
("mysql:jdbc://localhost:3306/egglabs","root","root");
Statement st = con.createStatement();
int i=st.executeUpdate
 ("insert into messages(msg)values('"+content+"')"); 
ResultSet rs=st.executeQuery
 ("select * from messages order by msg_id desc");

if(rs.next())
{
while(rs.next())
{
String msg=rs.getString("msg");
%>

<li>

<div align="left">

<span ><%= msg %> </span>

</div>

</li>

<%

}
}
else{
out.println("No Records Found");}
}

catch(Exception e){
Exception ex = e;
out.println("Mysql Database Connection Not Found");
}

%>

CSS Code

*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:1.2em;
}
ol.timeline li{
display:none;position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
height:45px}
ol.timeline li:first-child{
border-top:1px dashed #000;}