...

View Full Version : JSP with Ajax



jerald55
01-05-2011, 08:50 AM
Hi i'm a new to Ajax.
i'm using JSP for generating dynamic combo box.
i completed that using onchange Event in JSP but Form is loading for each event.
so my Team Leader advice me to use Ajax to avoid loading.

Now In the Form default i loaded the 1st combo box with State.now i don't know how give the link to getCity.jsp for getting City in Second combo box.

i have Form1.jsp , getCity.jsp , getArea.jsp , dil_ProjectMaster.jsp
for three combo box i created separate table for State mt1(table name),City mt2,Area mt3...,

jerald55
01-05-2011, 09:00 AM
This is my Script

Form1.jsp

<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.text.*"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<script language="java" type="text/javascript" >
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;
}
var xmlObj = GetXmlHttpObject();

function getCityData()
{
var stateValue = document.getElementById("State").value;

url = "http://localhost:8085/NewForm/getCity.jsp?State="+stateValue;
alert(url);
xmlObj.open("GET",url);

xmlObj.onreadystatechange = function() {
alert(xmlObj.status);
//alert(xmlObj.readystate);
if(xmlObj.readystate == 4 & xmlObj.status == 200)
alert(xmlObj.readystate);
{
alert("jerald");
var id = document.getElementById("City").innerHtml;
alert(id);
var result = xmlObj.responseText;

var s = result.split(',');
var indx = 1;
for(indx=1; indx < s.length; indx++)
{
id.options[s[indx]] = new Option(s[2],s[1]);
}
}
}
xmlObj.send(null);
}


function getAreaData()
{
var cityValue = document.getElementById("City").value;
var url = "getArea.jsp?City="+cityValue;
alert(url);
xmlObj.open("GET", url)
alert("3");
xmlObj.onreadystatechange = function() {


if(xmlObj.readystate == 4 & xmlObj.status == 200)
{
alert(xmlObj.statusText);
var id = document.getElementById("Area");
var result = xmlObj.responseText;

var s = result.split(',');
var indx = 1;
for(indx=1; indx < s.length; indx++)
{
id.options[indx] = new Option(s[2],s[1]);
}
}
}

xmlObj.send(null);
}
</script>

</head>
<title>Master</title>
<style rel="stylesheet" type="text/css" media="screen">
form
{
margin: 4em auto;
width: 75%;
}
</style>
</head>

<body bgcolor="orange" text='black'>
<form name="form1" action="http://localhost:8085/NewForm/dil_ProjectMaster.jsp" method="POST" onsubmit="return (checkform(this) && ValidateDate())";>

<div align="center">
<table border='0' height="500" width="1000" text='black' colspan='4' bgcolor="orange">

<tr>
<th colspan="4" ><font size="5">PROJECT MASTER</th>
</tr>
<tr>
<td><font size="5">Project Code</td>
<td><input type="text" name="dil_ProjectCode" id="dil_PC"></td>


<td><font size="5">Project Name</td>
<td ><input type="text" name="dil_ProjectName" id="dil_PN">

</tr>

<tr>
<td><font size="5">Work Level1</td>
<td >
<%
Connection con = null;
PreparedStatement stmt= null;
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","distil","distil");
%>


<%

stmt = con.prepareStatement("select S_ID,STATE from mt1");
ResultSet rs1=stmt.executeQuery();
%>
<select name="State" id="State" onchange=" return getCityData();">
<option value="0">------Please Select------</option>

<%
while(rs1.next())
{
%> <option value="<%=rs1.getString(1)%>"><%=rs1.getString(2)%></option>
<%}
rs1.close();
%>
<option selected="selected" value="<%=request.getParameter("State")%>"><%=request.getParameter("State")%></option>
</select>
</td>



<td><font size="5">Work Level2</td>

<td>
<select name="City" onchange="return getAreaData()";>
<option value="0">------Please Select------</option>
</select>
</td>


<tr>
<td><font size="5">Work Level3</td>
<td>

<select name="Area">
<option value="0">------Please Select------</option>
</select>
</td>

<td><font size="5">Notes</td>
<td><input type="text" name="dil_Notes"></td>
</tr>

<tr>
<td><font size="5">Project Start Date</td>
<td><input type="text" size="20" name="dil_ProjectStartDate">


</td>


<td><font size="5">Project End Date</td>
<td><input type="text" size="20" name="dil_ProjectEndDate">

</td>
</tr>
<tr>
<td></td>
<td><input type="Submit" value="Save" >
</td>
<td>
<input type="Button" value="New" onClick="location.href='http://localhost:8085/NewForm/Form1.jsp'"></td>
</tr>
</table>
</form>
<%
stmt.close();
con.close();
%>
</body>
</html>


getCity.jsp

<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.lang.*"%>
<%@ page import="java.text.*"%>
<%@page contentType="text/html" pageEncoding="UTF-8" language="java"%>

<%

String stateId = null;
Connection con = null;
PreparedStatement stmt = null;
ResultSet rs = null;


try
{
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());

con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","distil","distil");


stateId = request.getParameter("State");

String query = "select C_ID,CITY from mt2 where S_ID='"+stateId+"'";

stmt = con.prepareStatement(query);

rs = stmt.executeQuery();
String data = null;
while(rs.next())
{
data = ":" + rs.getString(1) + " " + rs.getString(2);
}

out.println(data);

}

catch (SQLException ex){
System.err.println(ex.getMessage());
}
catch (Exception e){
e.printStackTrace();
}
finally{

rs.close();
con.close();
stmt.close();

}
%>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum