Load dependent combo using AJAX, JSP & Servlet
1.index,jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<div align="center">
<form name="CountryDetails" >
<table>
<tr>
<td>State </td>
<td>
<select name="state" id="state" onchange="changeState()">
<option>-- Select State --</option>
<option value="1">Kerala</option>
<option value="3">Tamilnadu</option>
</select>
</td>
</tr>
<tr>
<td>District Name</td>
<td>
<span id="loadDistrict">
<select name="district" id="district">
<option>--Select District--</option>
</select>
</span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
2.script.js
function AjaxFunction()
{
var xmlrequest=false;
try
{
xmlrequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)
{
try
{
xmlrequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2)
{
xmlrequest=false;
}
}
if (!xmlrequest && typeof XMLHttpRequest != 'undefined')
{
xmlrequest=new XMLHttpRequest();
}
return xmlrequest;
}
function changeState()
{
var state=document.getElementById("state").value;
var url="StateDetails?command=statechange&id="+state;
var xmlrequest= AjaxFunction();
xmlrequest.open("GET",url,true);
xmlrequest.onreadystatechange=function()
{
if(xmlrequest.readyState==4)
{
if(xmlrequest.status==200)
{
//alert(xmlrequest.responseText);
document.getElementById("loadDistrict").innerHTML=xmlrequest.responseText;
}
}
};
xmlrequest.send(null);
}
3.StateDetails.java(Servlet)
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.mysql.jdbc.Statement;
/**
* Servlet implementation class StateDetails
*/
public class StateDetails extends HttpServlet {
private static final long serialVersionUID = 1L;
private static final String CONTENT_TYPE = "text/xml; charset=windows-1252";
/**
* Default constructor.
*/
public StateDetails() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType(CONTENT_TYPE);
int stateID=Integer.parseInt(request.getParameter("id").toString());
PrintWriter out=response.getWriter();
String xml="";
int id[]={1,2,3,4,5};
String name[]={"Erode","Karur","Trichy","Chennai","Madurai"};
try{
Connection con=null;
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://localhost:3036/country","root","");
System.out.println("111111111111111");
java.sql.Statement statement=con.createStatement();
ResultSet rs = statement.executeQuery("SELECT id,district FROM district where stateId="+stateID);
xml="<select name=\"district\" id=\"district\">";
xml+="<option>--Select District--</option>";
while (rs.next()) {
xml+="<option id=\""+rs.getInt(1)+"\">"+rs.getString(2)+"</option>";
}
xml+="</select>";
}
catch(Exception e){
System.out.println(e.getMessage());
}
/*xml="<select name=\"district\" id=\"district\">";
xml+="<option>--Select District--</option>";
for(int i=0;i<5;i++)
{
xml+="<option id=\""+id[i]+"\">"+name[i]+"</option>";
}
xml+="</select>";*/
out.write(xml);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
Download Source: AJAXExample
Subscribe to:
Posts (Atom)