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
<h3>What are you doing?</h3>
</form>
</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="">
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="update_button"/>
</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.
ReplyDeleteThe demo is not working.
ReplyDeleteI 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!!!!
ReplyDeletehey, hey , heyy...>!!
ReplyDeletehow 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.
if(rs.next())
ReplyDelete{
while(rs.next())
{
It seems to miss the first element ib ResultSet.
After executing the query it points before the first relust.
I don't know why I can't get my url , server warning is "
ReplyDeletehttp://localhost:8080/web/test/process.jsp"
please , help me :|
hello
ReplyDeletenice
ReplyDeletedude pls tell me about the coding of
ReplyDelete"your commnt will be post after approval"
Hi, can we convert text to speech with animation and lip sink using java/j2ee technologies..Thanks in advance..
ReplyDeleteDear friend please update php to jsp for all code
ReplyDelete