Home Jsp Display Data from database in Popup Window Using Ajax in JSP

Display Data from database in Popup Window Using Ajax in JSP
Posted on: August 25, 2008 at 12:00 AM

In this section, we have developed a application to display data in pop up window. We created file view.jsp, windowopen.jsp, getuser.jsp.

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

Related Tags for Display Data from database in Popup Window Using Ajax in JSP:
c, jsp, file, data, application, io, view, user, get, window, display, vi, this, open, app, create, js, ie, to, e, il, section, li, spl, use, pe, pop, dev, in, play, ca, j, isp, pen, pp, cat, do, s, sp, created, at, is, ha, develop, ea, s, s, th, av, .js, ati, ap, disp, ica, ica, pl, nd, on, o

«Previous Index Next»