Display Data from database in Popup Window Using Ajax in JSP
In this section, we have developed a application to
display data in pop up window. We created file view.jsp,
windowopen.jsp, getuser.jsp.
Brief description of the flow of the
application:
- User opens view.jsp on the browser and
click on the "View Record" button.
- After click on the "View Record"
button, resulting
open a
new pop up window "windowopen.jsp" and display the all the
records from database with "Red" color image and it can be works
as button.
- After click on particular "Red" Color
image, its color will change to "Green".
- After click on the "Select" button on page
'windowopen.jsp' the pop
up window will close and parent window text fields display the record.
Step 1: Create a web page ("view.jsp") to Employee Form.
<%@ page language="java" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.sql.*" %>
<HTML>
<head>
</head>
<BODY BGCOLOR="LIGHTYELLOW">
<FORM NAME="form" METHOD="GET" ACTION="process.jsp">
<br><br>
<H3> <P ALIGN="CENTER"> <FONT SIZE=6> EMPLOYEE DETAILS </FONT> </P> </H3>
<BR>
<BR>
<TABLE CELLSPACING=5 CELLPADDING=5 BGCOLOR="LIGHTBLUE"
COLSPAN=2 ROWSPAN=2 ALIGN="CENTER">
<TR>
<TD> <FONT SIZE=5> Enter Employee ID </TD>
<TD> <INPUT TYPE="TEXT" NAME="id" id="emp_id"> </TD> <TD> <INPUT TYPE="button" NAME="s1" VALUE="View Record" onClick=
"window.open('windowopen.jsp','mywindow','width=500,
height=350,toolbar=no,resizable=yes,menubar=yes')"
>
</FONT> </TD>
</TR>
<TR>
<TD> <FONT SIZE=5> Enter Employee Name </TD>
<TD><INPUT TYPE="TEXT" NAME="name" id="emp_name">
</FONT> </TD>
</TR>
</TR> </FONT>
<%
if(session.getAttribute("empcode") !=null &&
session.getAttribute("empname") !=null)
{ %>
<script language="javascript">
document.getElementById('id').value=
<%=session.getAttribute("empcode").toString()%>
document.getElementById('name').value='
<%=session.getAttribute("empname").toString()%>'
</script>
<%
session.removeAttribute("empcode");
session.removeAttribute("empname");
}
%>
</FORM>
</BODY>
</HTML> |
Step:2Create a
webpage ("windowopen.jsp") to show records in pop up
window..
<%@ page import="java.sql.*" %>
<html>
<head>
<script type="text/javascript">
///// Code chages
var imageURL = "redar.jpg";
function changeImage(img_id) {
var imgs=document.getElementsByTagName('img');
for(var i=1;i<=imgs.length;i++) {
var imgid="myImage"+i;
if(imgid==img_id){
document.getElementById(img_id).src="greenar.gif";
}
else{
document.getElementById(imgid).src=imageURL;
}
}
}
///////////////
function trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g,"");
}
function validate()
{
var emp_value ="";
var count=0;
var imgs=document.getElementsByTagName('img');
for(var i=1;i<=imgs.length;i++) {
var imgid="myImage"+i;
var imgurl = document.getElementById(imgid).src;
var imgar = imgurl.split("/");
if(imgar[4]=="greenar.gif")
{
count++;
}
}
if(count==0)
{
alert("Please Select Employee Id");
return false;
}
return true;
}
function showEmp(){
if(validate()){
var imgs=document.getElementsByTagName('img');
for(var i=1;i<=imgs.length;i++) {
var imgid="myImage"+i;
var emp_id = "eid"+i;
var imgurl = document.getElementById(imgid).src;
var imgar = imgurl.split("/");
if(imgar[4]=="greenar.gif"){
var emp_value = document.getElementById(emp_id).value;
}
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.jsp"
url=url+"?emp_id="+emp_value;
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var showdata = xmlHttp.responseText;
var strar = trim(showdata).split(":");
if(strar.length>0)
{
window.opener.location.reload();
window.location.reload();
window.close();
opener.document.getElementById("emp_id").value=strar[1];
opener.document.getElementById("emp_name").value=strar[0];
window.close();
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form name="employee">
<br><br>
<table border="1" width="300px" align="center" bgcolor="#CDFFFF">
<tr><td align="center" colspan=3><b>Select Employee Id</b></td></tr>
<%
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "user_register";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "root";
int sumcount=0;
Statement st;
try {
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url+dbName,userName,password);
String query = "select * from employee_details";
st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
%>
<%
int count=0;
while(rs.next())
{
count++;
%>
<tr >
<input type="hidden" value="<%=rs.getString(1)%>" id="eid<%=count%>">
<td align="right"><img src="redar.jpg" width="25px" height="25px" name="myImage" onclick="changeImage(this.id);" id="myImage<%=count%>" border="0"></td><td>
<%=rs.getString(1)%></td><td width="50%"><%=rs.getString(2)%></td></tr>
<%
}
%>
<%
}
catch (Exception e) {
e.printStackTrace();
}
%>
<tr><td align="center" Colspan=3><input type="button" value="Select" onclick="javascript:showEmp();"</td></tr>
</table>
</form>
</body>
</html> |
Step 3:Create a
webpage "getuser.jsp" to retrieve the data from database
of selected
user.
<%@ page import="java.sql.*" %>
<%
if(request.getParameter("emp_id")!=null)
{
String emp_id = request.getParameter("emp_id").toString();
String data ="";
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "user_register";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "root";
int sumcount=0;
Statement st;
try {
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url+dbName,userName,password);
String query = "select * from employee_details where eid='"+emp_id+"'";
st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
while(rs.next())
{
data = rs.getString(2) + " " + rs.getString(3) +":"+ emp_id;
}
out.println(data.trim());
}
catch (Exception e) {
e.printStackTrace();
}
}
else
{
response.sendRedirect("winopenradio.jsp");
}
%>
|
Successful Output of the program:
Database Table :
To open pop up window click on the button "View
Record".
Retrieve all the record from the database and
display on the pop up window "windowopen.jsp".
After click on "Red" color image and the
color of the select image is changed to "Green" color image. Then pop up window is closed and Show the parent window with data in the text
field.
Download the full web application shows here.
Download the application
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
