This example refers to the same as Startups + Ajax by example but here I am using JPG instead of Struts. The example has only dependency to prototype.js and is more helpful if you are using just JSP. You can download the latest code of
prototype.js Prototype is wonderful to have in your toolkit as it makes life easy for a JSP or JavaScript developer.
The example is about how to populate the dependent dropdown list without refreshing the entire page when one of the options is selected. The example uses 2 jsp pages, first jsp (ajaxOptions.jsp) and uses prototype.js file and which has AJAX calls to the second jsp(ajaxOptionResult.jsp) this jsp returns XML as a response.
1. ajaxOptions.jsp
Make sure you have the prototype.js file as a part of you web application and reference the path in this jsp page in my case I have the js file under js/ajax/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>Address Form</title>
<!-- include the AJAX JS File -->
<script src="js/ajax/prototype.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
/*
onChange event of the dropDownList will calls this function
which has AJAX call to Struts Action class
@param: dropDownList object (this)
@param: URL or Struts Action
*/
function depedentDropDown(obj, url) {
var stateValue = $F(obj)
var pars = "state=" + stateValue;
//alert(stateValue);
var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars,
onComplete: showResponse});
}
/*
Upon completing the request the AJAX will call this method
which is responsible for loading the depedent list from the XML
*/
function showResponse(originalRequest)
{
var list = $('city');
var xmlString = originalRequest.responseXML;
var items = xmlString.getElementsByTagName('labelValueBean');
clearList(list);
if (items.length > 0)
{
for (var i = 0; i < items.length; i++)
{
var node = items[i];
var value = "";
var label = "";
if (node.getElementsByTagName("label")[0].firstChild.nodeValue) {
value = node.getElementsByTagName("label")[0].firstChild.nodeValue;
label = node.getElementsByTagName("value")[0].firstChild.nodeValue;
}
addElementToList(list, value, label);
}
}
else
{
addElementToList(list, "", "-- Select is Empty --");
}
}
/**
remove the content of te list
*/
function clearList(list)
{
while (list.length > 0)
{
list.remove(0);
}
}
/**
Add a new element to a selection list
*/
function addElementToList(list, value, label)
{
var option = document.createElement("option");
option.value = value;
var labelNode = document.createTextNode(label);
option.appendChild(labelNode);
list.appendChild(option);
}
</SCRIPT>
</head>
<body>
<form method="POST" action="">
<fieldset style="padding: 2">
<legend>Address Form</legend>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="58%">
<tr>
<td width="24%">Address</td>
<td width="76%">
<input type="text" name="address1" size="20"/>
</td>
</tr>
<tr>
<td width="24%">Apt#</td>
<td width="76%">
<input type="text" name="address2" size="20"/>
</td>
</tr>
<tr>
<td width="24%">State</td>
<td width="76%">
<select size="1" name="state" onChange="depedentDropDown(this,'ajaxOptionResult.jsp')">
<option>Select State</option>
<option value="VA">VA</option>
<option value="MD">MD</option>
</select>
</td>
</tr>
<tr>
<td width="24%">City</td>
<td width="76%">
<select size="1" name="city">
<option>Select City</option>
</select>
</td>
</tr>
<tr>
<td width="24%">Zip</td>
<td width="76%">
<input type="text" name="zip" size="20"/>
</td>
</tr>
</table>
</fieldset>
<p>
<input type="submit" value="Submit" name="B1"/>
<input type="reset" value="Reset" name="B2"/>
</p>
</form>
</body>
</html>
2. ajaxOptionResult.jsp this JSP page response is of type "text/xml"
<%
String state = request.getParameter("state");
String[] vaArray = new String[]{"Reston", "Centerville", "Chantilly", "Fairfax"};
String[] mdArray = new String[]{"Silver Spring", "Rockwill", "Bethesda", "Brandywine" };
// pouplate the state
StringBuffer buffer = new StringBuffer();
buffer.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
buffer.append("\n");
buffer.append("<root>");
buffer.append("\n");
if(state.equals("VA")){
for(int i=0; i < vaArray.length; i++){
buffer.append("<labelValueBean>");
buffer.append("\n");
buffer.append("<label>" + vaArray[i] + "</label>");
buffer.append("\n");
buffer.append("<value>"+ vaArray[i]+"</value>");
buffer.append("\n");
buffer.append("</labelValueBean>");
}
}else if(state.equals("MD")){
for(int i=0; i < mdArray.length; i++){
buffer.append("<labelValueBean>");
buffer.append("\n");
buffer.append("<label>" + mdArray[i] + "</label>");
buffer.append("\n");
buffer.append("<value>"+ mdArray[i]+"</value>");
buffer.append("\n");
buffer.append("</labelValueBean>");
}
}else{
buffer.append("<labelValueBean>");
buffer.append("\n");
buffer.append("<label>Selet is empty</label>");
buffer.append("\n");
buffer.append("<value>Empty</value>");
buffer.append("\n");
buffer.append("</labelValueBean>");
}
buffer.append("\n");
buffer.append("</root>");
System.out.print(buffer.toString());
response.addHeader("Content-Type", "text/xml");
response.setContentType("text/xml; charset=windows-1252");
out.write(buffer.toString());
%>
It is as simple as it is.
