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 DemoNote: 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>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
<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="" %>
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");
%>
}
else{
out.println("No Records Found");}
}
catch(Exception e){
Exception ex = e;
out.println("Mysql Database Connection Not Found");
}
<%
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;}
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;}
Can i find example like this for php and MySQL.
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
This tutorial helped me figure out EXACTLY what I needed... Thanks a lot!!!!