dynamically populate the city combo box based on the values of state combo +ajax+jsp
First create a database in ms access named shanu
In this database create 2 tables namely
State state_id state_name
1 Orissa
2 Andhra Pradesh
3 Madhya Pradesh
City
city_id city_name state_id
1 Bhubaneswar 1
2 Cuttack 1
3 Dhenkanal 1
4 Guntur 2
5 Bhopal 3
Now create a user dsn named shanu.
Create a package mypackage and in it
Now prepare 3 class files namely
Connection.javapackage mypackage;
import java.sql.*;
public class connection {
public String url = "jdbc:odbc:shanu";
public Connection con;
public Statement st;
public void get_connection()
{
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
con = DriverManager.getConnection(url);
st=con.createStatement();
}catch(Exception e){}
}
public void close_connection()
{
try{
con.close();
}catch(Exception e){}
}
}
State.java
package mypackage;
import java.sql.*;
public class state extends connection {
public ResultSet getStates()
{
ResultSet rs = null;
try{
get_connection();
rs= st.executeQuery("select * from state");
}catch (Exception e){}
return (rs);
}
}
city.javapackage mypackage;
import java.sql.*;
public class city extends connection {
public ResultSet getCity(String Statename)
{
ResultSet rs = null;
try{
get_connection();
rs= st.executeQuery("select city.city_name as cname from city,state where city.state_id=state.state_id and state.state_name= '"+ Statename+"'" );
}catch (Exception e){}
return (rs);
}
}
Now create jsp file state_city.jsp
<%@page import = "java.io.PrintWriter" %>
<%@page import="java.sql.*"%>
<%@page import="mypackage.*"%>
<html>
<head>
<script type="text/javascript">
function showcity(str)
{
//document.forms[0].action="getcustomer.jsp?q="+str;
//document.forms[0].submit();
document.getElementById("cities").length = 0;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","getcity.jsp?q="+str,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var xml=xmlhttp.responseXML;
var tags=xml.getElementsByTagName("tr");
for(var i=0;i<tags.length;i++)
{
var combo = document.getElementById("cities");
var option = document.createElement("option");
option.text = tags[i].childNodes[0].childNodes[0].nodeValue;
option.value = tags[i].childNodes[0].childNodes[0].nodeValue;
try
{
combo.add(option, null); //Standard
}catch(error){combo.add(option); // IE only
}
}
//document.getElementById("txtHint").innerHTML=xmlht tp.responseText;
//document.getElementById("names").value =xmlhttp.responseText;
}
}
xmlhttp.send();
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<table width="616" border="1">
<tr>
<td>State Name </td>
<td> <%
//String tables = "<table><tr><td>hiii</td></tr></table>";
//out.print(names);
try{
state s = new state();
ResultSet rs= s.getStates();
String ss;
%>
<select id="combos" name="combos" onChange="showcity(this.value)">
<%
while(rs.next())
{
ss= rs.getString(2);
%>
<option value= "<%= ss %>" ><%=ss %></option>
<%
}
%>
</select>
<%
}
catch(Exception e){}
%>
</td>
</tr>
<tr>
<td>City</td>
<td><select id="cities" name="cities" ></td>
</tr>
</table>
</form>
</body>
</html>
Now create a jsp file getcity.jsp
<%@page import = "java.io.PrintWriter" %>
<%@page import="java.sql.*"%>
<%@page import="mypackage.city"%>
<%
String names = request.getParameter("q");
out.print(names);
try{
city c= new city();
ResultSet rs= c.getCity(names);
String xml="<table>";
while(rs.next()){
xml+="<tr>";
xml+="<td>";
xml+=rs.getString(1);
xml+="</td>";
xml+="</tr>";
}
xml+="</table>";
out.print(xml);
//con.close();
PrintWriter pw=response.getWriter();
response.setContentType("text/xml");
pw.write(xml);
pw.flush();
pw.close();
}
catch(Exception e){}
%>
Modify web.xml as defined below<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>2</param-value>
</init-param>
<init-param>
<param-name>detail</param-name>
<param-value>2</param-value>
</init-param>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>state_city.jsp</welcome-file>
</welcome-file-list>
</web-app>
Now run the web application
http://localhost:8085/ajax_project/
