9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Friday, May 22, 2009

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;}

Comments
{ 11 comments }
Anonymous said...

Can i find example like this for php and MySQL.

Anonymous said...

The demo is not working.

I am am looking to do :

List users
when click in a user :
will see his assigned roles with removerole lin for each role.

another link to add roles to the user.

I have done this using just jsp, but I like the jquery , I will appreciate if you can help.
thanks

kelly said...

This tutorial helped me figure out EXACTLY what I needed... Thanks a lot!!!!

gumuruhsspj said...

hey, hey , heyy...>!!

how about when we want to post a
text field and also a file within a form?

How could jquery do the posting request?

mind to share a bit?

i'm a bit curious when I have 1 frame with 2 item elements; 1)textfield 2)File Upload

(^^'a.... if there's an answer.

Anonymous said...

if(rs.next())
{
while(rs.next())
{

It seems to miss the first element ib ResultSet.
After executing the query it points before the first relust.

Anonymous said...

I don't know why I can't get my url , server warning is "
http://localhost:8080/web/test/process.jsp"
please , help me :|

Anonymous said...

hello

Anonymous said...

nice

mohit said...

dude pls tell me about the coding of

"your commnt will be post after approval"

Swarna S said...

Hi, can we convert text to speech with animation and lip sink using java/j2ee technologies..Thanks in advance..

Palani M said...

Dear friend please update php to jsp for all code

Post a Comment