Popup Window using Ajax In JSP

In this section, we will develop a Popup Window application using Ajax in JSP.

Popup Window using Ajax In JSP

Popup Window using Ajax In JSP

     

In this section, we will develop a Popup Window application using Ajax in JSP. For this, we will create the following files for the application:

  1. EmployeeDetail.jsp
  2. winopenradio.jsp
  3. getuser.jsp
  4. process.jsp
  5. InsertData.jsp
  6. DeleteRow.jsp
  7. ModifyForm.jsp
  8. Modout.jsp
  9. QueryAction.jsp

Brief description of the flow of the application:

  • Open EmployeeDetail.jsp in the browser and click on "View Database" button.
  • New Pop window winopenradio.jsp will open which will display the employee id and employee name.
  • Import getuser.jsp to display all data from database. 


Here is the code of this Application:

Step 1: Create a web page ("EmployeeDetail.jsp").

 <%@ 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">
<H3><P ALIGN="CENTER"> <FONT SIZE=6> EMPLOYEE DETAILS </FONT> </P></H3></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="empid" id="emp_id"> </TD> 
<TD> <input TYPE="button" NAME="s1" VALUE="View Database" 
onClick="window.open('winopenradio.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="empname" id="emp_name">
</FONT> </TD>
</TR>
<TR>
<TD> <FONT SIZE=5> Enter New Name (For UPDATE only) </TD>
<TD><INPUT TYPE="TEXT" NAME="nname"> </FONT> </TD>
</FONT> </TR>
<TR> <FONT SIZE=6>
<TD> <INPUT TYPE="SUBMIT" NAME="r1" VALUE="Insert">
<INPUT TYPE="SUBMIT" NAME="r1" VALUE="Delete">
<INPUT TYPE="SUBMIT" NAME="r1" VALUE="Update">
<INPUT TYPE="SUBMIT" NAME="r1" VALUE="Query"> </TD>
</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 2: Create the data display action file ("winopenradio.jsp") for showing the employee id and employee name.
   

 <%@ page import="java.sql.*" %> 
<html>
<head>
<script type="text/javascript">
function trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g,"");
}

function validate(){
var emp_value ="";
for (var i=0; i < document.employee.empid.length; i++){
if (document.employee.empid[i].checked){
var emp_value = document.employee.empid[i].value;
}
}
if(emp_value=="" || emp_value==null){
alert("Please select Employee Id");
return false;
}
return true
}
function showEmp(){ 
if(validate()){
for (var i=0; i < document.employee.empid.length; i++){
if(document.employee.empid[i].checked){
var emp_value = document.employee.empid[i].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(); 
opener.document.getElementById("emp_id").value=strar[1];
opener.document.getElementById("emp_name").value=strar[2];

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="0" width="400px" align="center" bgcolor="#CDFFFF">
<tr><td align="center" colspan=2><b>Select Employee Id</b></td></tr>
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

int sumcount=0; 
Statement st;
try{
Class.forName(driver).newInstance();
con = DriverManager.getConnection(url+db,userName,password);
String query = "select * from Employee";
st = con.createStatement();
ResultSet rs = st.executeQuery(query);
%>

<%
while(rs.next()){
%>
<tr><td align="center" width="50%">
<input type="radio" name="empid" value=<%=rs.getString(1)%>><%=rs.getString(1)%></td>
<td width="50%"><%=rs.getString(3)%></td></tr>
<%
}
%>
<%
}
catch (Exception e) {
e.printStackTrace();
}
%>
<tr><td align="center" width="50%">
<input type="button" value="Select" onclick="javascript:showEmp();"</td></tr>
</table>
</form>
</body>
</html>

  
Step 3: Create ("getuser.jsp") file for getting employeeid from database using  JDBC  Database.

 <%@ page import="java.sql.*" %> 
<%
String emp_id = request.getParameter("emp_id").toString();
String data ="";

Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

int sumcount=0; 
Statement st;

try {
Class.forName(driver).newInstance();
con = DriverManager.getConnection(url+db,userName,password);
String query = "select * from Employee where eid='"+emp_id+"'";
st = con.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();
}
%>


Step 4: Create "Process.jsp"  for Processing the Data and forward it according to user requirement.

 <%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<%
String str=request.getParameter("r1");
String name=request.getParameter("empname");
String code=request.getParameter("empid");


if(str.equals("Insert")) {
%>
<jsp:forward page="InsertData.jsp" />
<%
}
else if(str.equals("Delete")) {
%>
<jsp:forward page="DeleteRow.jsp" />
<%
}
else if(str.equals("Update")) {
%>
<jsp:forward page="ModifyForm.jsp" />
<%
}
else if(str.equals("Query")) {
%>
<jsp:forward page="QueryAction.jsp" />
<%
}
else {
%>
<jsp:forward page="Noresponse.html" />
<%
}
%>


Step 5: Create the "InsertData.jsp" file for Inserting data into database.

<%@ page language="java" import="java.lang.*" import="java.sql.*" %>
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

String str=request.getParameter("r1");
String empname=request.getParameter("empname");
String code=request.getParameter("empid");
out.println(empname);
out.println(code);

try {
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
PreparedStatement pst = con.prepareStatement("insert into Employee values(?,?,?)");
pst.setString(1,"545EE");
pst.setString(2,"fghbfgbf");
pst.setString(3,"fghfgh12");
int i = pst.executeUpdate();
if(i!=0){
out.println("<br>Record has been inserted");
}
else{
out.println("failed to insert the data");
}
}
catch(Exception e) {
out.println(e.toString());
}
%>


Step 6: Create "DeleteRow.jsp" file for deleting the row from database using JDBC database.

<%@ page language="java" import="java.lang.*" import="java.sql.*" %>
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

String str=request.getParameter("r1");
String name=request.getParameter("empname");
String code=request.getParameter("empid");
int EmpID=Integer.parseInt(code);

try {
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
String sql = "delete from Employee where empid= ?";
PreparedStatement prest = con.prepareStatement(sql);
prest.setInt(1,EmpID);
int i = prest.executeUpdate();
out.println("Successfully delete from database!");
con.close();
}
catch(Exception e) {
out.println(e);
}
%>


Step 7: Create modify file ("ModifyForm.jsp") .

 <html>
<body bgcolor="lightyellow">
<FORM NAME="f1" ACTION="Modout.jsp">
<%
String empname =request.getParameter("empname");
String code=request.getParameter("empid");
int empid=Integer.parseInt(code);
%>
<P ALIGN="CENTER"> <FONT SIZE=6> Old Name is <%= empname %> </FONT> </BR> </BR> </BR> </P>
<TABLE CELLSPACING=5 CELLPADDING=5 BGCOLOR="LIGHTBLUE" COLSPAN=2 ROWSPAN=2 ALIGN="CENTER">
<TR> <TD> <FONT SIZE=5> Enter New Name </TD>
<input type="hidden" name="id" value="<%=empid%>"/>
<TD> <INPUT TYPE="TEXT" NAME="newname"> </TD> </FONT> </TR>
<TR> <TD> <INPUT TYPE="SUBMIT" VALUE="Modify"> </TD> </TR>
</form>
</br>
</body>
</html> 


Step 8: Create modify action file ("Modout.jsp").

In this step you can update data into database using "Modout.jsp".

<%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<HTML>
<BODY BGCOLOR="LIGHTYELLOW">
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

String str=request.getParameter("r1");
String newname=request.getParameter("newname");
String id=request.getParameter("id");
System.out.println("MyId: "+newname);

try {
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
String sql = "UPDATE Employee SET empname = ? WHERE empid = ?";
PreparedStatement prest = con.prepareStatement(sql);
prest.setString(1,newname); 
prest.setInt(2,Integer.parseInt(id));

prest.executeUpdate();
out.println("Updating Successfully!");
}
catch(Exception e) {
out.println(e);
}
%>
</BODY>
</HTML>

 
Step 9: In this step you will learn, how to retrieve data from database.
 

 <%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";
String str=request.getParameter("r1");
String name=request.getParameter("name");
String code=request.getParameter("empid");

int EmpID=Integer.parseInt(code);
try {
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
String query=null;
query="SELECT empname FROM Employee where empid= ?";
PreparedStatement prest = con.prepareStatement(query);
prest.setInt(1, EmpID);
ResultSet rs = prest.executeQuery();
out.println("<B> <CENTER> EMPLOYEE NAME </CENTER> </B>");
ResultSetMetaData rsmd=rs.getMetaData();
int colcount=rsmd.getColumnCount();
out.println("<TABLE ALIGN=CENTER BORDER=1 CELLPADDING=2>");
out.println("<TR>");
for(int i=1;i<=colcount;i++) {
out.println("<TH>" +rsmd.getColumnLabel(i)+ "</TH>");
out.println("<TR>");
while(rs.next()){
out.println("<TD>" +rs.getString("empname")+ "</TD>");
}
out.println("</TABLE>");
out.println("</BODY>");
con.close();
}
}
catch(Exception e){
out.println(e.toString());
}
%>

  
Here is the successfully Output:
  


When you click on View Database button, popup Window will be displayed.


Select the radio button. If you have not selected radio button, a massage will display like this.






 

 

Download Application

Tutorials

  1. Creating a String
  2. Introduction to JSP
  3. Reading Request Information
  4. Introduction to the JSP Java Server Pages
  5. JSP FUNDAMENTALS
  6. Using Taglib in JSP. A brief introduction to taglibs and taglibs programing.
  7. JSP date example
  8. Reading Request Information
  9. Using Beans in JSP. A brief introduction to JSP and Java Beans.
  10. JSP 2.0 - New Features
  11. JSP Excel Tutorial
  12. Create Excel Sheet Using JSP
  13. Inserting Image In Excel Sheet Using JSP
  14. How to Create Excel Page Using JSP
  15. How to Create New Excel Sheet Using JSP
  16. Create Excel Sheet Using JSP
  17. Passing Various Data Types into Cells
  18. Assing Date into Cells
  19. Reading And Writing Excel File
  20. Selecting Excel Sheet File
  21. Zoom in Excel
  22. Zoom Out Excel
  23. Merging Two Cells
  24. Working With Fonts
  25. Working With Alignment Using JSP for Excel
  26. Shifting Row Using JSP
  27. Freeze And Split Pane
  28. Repeating Rows And Column
  29. different borders
  30. Create Shape in Excel Using JSP
  31. Creating Oval in Excel Using JSP
  32. Create Box in Excel Sheet Using JSP
  33. Filling Color in Excel Using JSP
  34. Set Font into TextBox String Using JSP
  35. Fit Hight Ad Wdth of Ecel Seet Uing JSP
  36. Setting Line Style
  37. Finding a Factorial using while loop
  38. JSP Simple Examples
  39. Calculate factorial Using Recursion
  40. Multiple Methods in Jsp