Task: Populate states based on Country using AJAX.
In previous post its done using javascript. Now its based on Ajax.
In this example i used static data. we can do it using Database. Based on country it will get the corresponding states.
1). RegisterUser.jsp
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<html>
<head>
<script type="text/JavaScript" src="javascripts/CommonAjax.js"></script>
</head>
<body> <h2>Struts1.3 - Ajax Example</h2>
<b>User Registeration Form</b>
<font color="red"> <html:errors/> </font>
<html:form action="/Register" ><br/>
<bean:message key="label.user.username" /> :
<html:text property="username" size="20"/><br/>
Country:<html:select property="region" styleId="region" onchange="getTerritoriesAjax(this);">
<html:option value="">-- None --</html:option>
<html:option value="Central">Central</html:option>
<html:option value="East">East</html:option>
<html:option value="Enterprise">Enterprise</html:option>
<html:option value="West">West</html:option>
</html:select>
State:<html:select property="territory" styleId="territory" >
<html:option value="">-- Please Select --</html:option>
</html:select>
<html:submit>
<bean:message key="label.user.button.submit" />
</html:submit></html:form></body>
</html>
2). CommonAjax.js
/*Don't Alter these Methods*/
var contactId;
function newXMLHttpRequest() {
var xmlreq = false;
if(window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("MSxm12.XMLHTTP");
} catch(e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2) {
xmlreq = false;
}
}
}
return xmlreq;
}
function readyStateHandler(req,responseXmlHandler) {
return function() {
if (req.readyState == 4) {
if (req.status == 200) {
responseXmlHandler(req.responseXML);
} else {
alert("HTTP error"+req.status+" : "+req.statusText);
}}}
}
/*Methods for getting States depend on Country*/
function getTerritoriesAjax() {
var country = document.getElementById("region").value;
alert("country"+country);
var req = newXMLHttpRequest();
req.onreadystatechange = readyStateHandler(req, populateStates);
// var url = CONTENXT_PATH+"/getStateData.do?country="+country;
var url = "/AjaxSt1Sam/getStateData.do?region="+country;
req.open("GET",url,"true");
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(null);
}
function populateStates(resXML) {
var stateId = document.getElementById("territory");
var country = resXML.getElementsByTagName("COUNTRY")[0];
var states = country.getElementsByTagName("STATE");
stateId.innerHTML="";
for (var i=0;i<states.length;i++) {
var stateName = states[i];
var name = stateName.firstChild.nodeValue;
var opt = document.createElement("option");
opt.setAttribute("value",name);
opt.appendChild(document.createTextNode(name));
stateId.appendChild(opt);
}}
3). AjaxAction.java
Its normal action class. Insert this code in execute method.
StringBuffer stringBuffer = new StringBuffer();
country=request.getParameter("region");
UserForm usrFrm = (UserForm) form;
// try{
//country = usrFrm.getRegion(); //request.getAttribute("country").toString();
//}catch(NullPointerException ex){
// country="East";
//}
System.out.println(country);
stringBuffer.append("<xml version=\"1.0\">");
stringBuffer.append("<COUNTRY countryName=\"" + country + "\">");
stringBuffer.append("<STATE>--Please Select--</STATE>");
// while(resultSet.next()){
stringBuffer.append("<STATE>North Central</STATE>");
stringBuffer.append("<STATE>Great Lakes</STATE>");
stringBuffer.append("<STATE>Great Plains</STATE>");
// }
stringBuffer.append("</COUNTRY>");
stringBuffer.append("</xml>");
response.setContentType("text/xml"); // this is imp.
PrintWriter out = response.getWriter();
out.println(stringBuffer.toString());
out.flush();
return null;
4). struts-config.xml
Add Action for ajax call.
<action path="/getStateData" type="com.mss.user.action.AjaxAction"/>
Thats it. it simply populate the state data.
In previous post its done using javascript. Now its based on Ajax.
In this example i used static data. we can do it using Database. Based on country it will get the corresponding states.
1). RegisterUser.jsp
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<html>
<head>
<script type="text/JavaScript" src="javascripts/CommonAjax.js"></script>
</head>
<body> <h2>Struts1.3 - Ajax Example</h2>
<b>User Registeration Form</b>
<font color="red"> <html:errors/> </font>
<html:form action="/Register" ><br/>
<bean:message key="label.user.username" /> :
<html:text property="username" size="20"/><br/>
Country:<html:select property="region" styleId="region" onchange="getTerritoriesAjax(this);">
<html:option value="">-- None --</html:option>
<html:option value="Central">Central</html:option>
<html:option value="East">East</html:option>
<html:option value="Enterprise">Enterprise</html:option>
<html:option value="West">West</html:option>
</html:select>
State:<html:select property="territory" styleId="territory" >
<html:option value="">-- Please Select --</html:option>
</html:select>
<html:submit>
<bean:message key="label.user.button.submit" />
</html:submit></html:form></body>
</html>
2). CommonAjax.js
/*Don't Alter these Methods*/
var contactId;
function newXMLHttpRequest() {
var xmlreq = false;
if(window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("MSxm12.XMLHTTP");
} catch(e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2) {
xmlreq = false;
}
}
}
return xmlreq;
}
function readyStateHandler(req,responseXmlHandler) {
return function() {
if (req.readyState == 4) {
if (req.status == 200) {
responseXmlHandler(req.responseXML);
} else {
alert("HTTP error"+req.status+" : "+req.statusText);
}}}
}
/*Methods for getting States depend on Country*/
function getTerritoriesAjax() {
var country = document.getElementById("region").value;
alert("country"+country);
var req = newXMLHttpRequest();
req.onreadystatechange = readyStateHandler(req, populateStates);
// var url = CONTENXT_PATH+"/getStateData.do?country="+country;
var url = "/AjaxSt1Sam/getStateData.do?region="+country;
req.open("GET",url,"true");
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(null);
}
function populateStates(resXML) {
var stateId = document.getElementById("territory");
var country = resXML.getElementsByTagName("COUNTRY")[0];
var states = country.getElementsByTagName("STATE");
stateId.innerHTML="";
for (var i=0;i<states.length;i++) {
var stateName = states[i];
var name = stateName.firstChild.nodeValue;
var opt = document.createElement("option");
opt.setAttribute("value",name);
opt.appendChild(document.createTextNode(name));
stateId.appendChild(opt);
}}
3). AjaxAction.java
Its normal action class. Insert this code in execute method.
StringBuffer stringBuffer = new StringBuffer();
country=request.getParameter("region");
UserForm usrFrm = (UserForm) form;
// try{
//country = usrFrm.getRegion(); //request.getAttribute("country").toString();
//}catch(NullPointerException ex){
// country="East";
//}
System.out.println(country);
stringBuffer.append("<xml version=\"1.0\">");
stringBuffer.append("<COUNTRY countryName=\"" + country + "\">");
stringBuffer.append("<STATE>--Please Select--</STATE>");
// while(resultSet.next()){
stringBuffer.append("<STATE>North Central</STATE>");
stringBuffer.append("<STATE>Great Lakes</STATE>");
stringBuffer.append("<STATE>Great Plains</STATE>");
// }
stringBuffer.append("</COUNTRY>");
stringBuffer.append("</xml>");
response.setContentType("text/xml"); // this is imp.
PrintWriter out = response.getWriter();
out.println(stringBuffer.toString());
out.flush();
return null;
4). struts-config.xml
Add Action for ajax call.
<action path="/getStateData" type="com.mss.user.action.AjaxAction"/>
Thats it. it simply populate the state data.
No comments:
Post a Comment