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