View Latest Questions and Answers|Ask Questions?|Tutorials

 
 

Home Jsp Popup Window using Ajax In JSP



Popup Window using Ajax In JSP
Posted on: July 30, 2008 at 12:00 AM
In this section, we will develop a Popup Window application 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

Related Tags for Popup Window using Ajax In JSP:
c,  ajax,  jsp,  application,  io,  popup,  window,  using,  this,  app,  js,  e,  il,  ax,  section,  li,  pop,  dev,  in,  ca,  j,  pp,  cat,  do,  s,  sp,  at,  is,  ll,  develop,  s,  s,  th,  ati,  ap,  ica,  ica,  pl,  nd,  on,  o

«Previous Index Next»

More Tutorials from this section

Ask Questions?    Discuss: Popup Window using Ajax In JSP   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics
 

 

 

Services

Home Privacy Policy
© All Rights are Reserved for Rose India