Home Jsp Display Data from database in Popup Window Using Ajax in JSP
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Display Data from database in Popup Window Using Ajax in JSP

Advertisement
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

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 25, 2008

Ask Questions?    Discuss: Display Data from database in Popup Window Using Ajax in JSP   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
anishu
July 14, 2012
reply

may i have the database creation query please?
rocky sharma
September 7, 2012
popup problem

Hello sir, I have an application in which on button click without postback i have to fetch data from database and that data i have to show in pop up window Dynamically..
Shrikant Kale
January 16, 2014
Error in above code

Element "input" not allowed as child of element "tr" in this context. (Suppressing further errors from this subtree.) From line 142, column 11; to line 143, column 44 (Rule Category: Elements structure) ---- (Alt-Enter shows hints)
DMCA.com