构建启用了 Ajax 的 JSP TagLib 控件，第 3 部分: 更新面板和弹出对话框控件

function showUpdatePanel(controlName) {
	var functionName = controlName + '_onShow';
	window[functionName]();
}

function cityPanel_onShow() { 
	// Invoke the onload event. 
	// If true is not return by the event handler, 
	// cancel the update to the panel
	if (!window['onCityPanelLoad']()) { 
		return; 
	} 
	
	// Get the dialog element
	var controlName = 'cityPanel_Container';	
	var curControl= document.getElementById(controlName);
	
	// Update status message to the value specified in the 
	// updatemessage attribute
	if (curControl != null) {
		curControl.innerHTML = 'Retrieving cities...';
		curControl.className = 'loadingpanel';
	}
	
	// Url for retrieving dialog content (specified in url attribute)
	var targetUrl = '/ajaxcontrols3/fragments/cityList.jsp';
	
	// Build the POST data sent for the asynchronous request to 
	// retrieve the update panel content
	// The arguments specified in the contained panelargument tags
	// are dynamically added to the post data
	var postData = 'panelId=cityPanel' + '&state=' + getFormValue('state') 
		+ '&cityPrefix=' + getFormValue('cityPrefix');		
	
	// Initialize XmlHttpRequest object
	initializeXmlHttpRequest();
	if (req!=null) {
		req.onreadystatechange=cityPanel_onServerResponse;
		// Set window status
		window.status='Retrieving cities...';
		
		// Open server request
		req.open('POST',targetUrl,true);
		req.setRequestHeader("Content-type", 
			"application/x-www-form-urlencoded");
		req.setRequestHeader("Content-length", 
			postData.length);

		// Send data
		req.send(postData);		
	}
}

function cityPanel_onServerResponse() {
	// If loaded
	if(req.readyState!=4) return;
	
	// If an error occurred
	if(req.status != 200) {
		alert('An error occurred retrieving data.');
		return;
	}

	// Get panel
	var curControl= document.getElementById('cityPanel_Container');
	
	// If panel not found simply return (this shouldn't happen)
	if (curControl == null) 
		return;
	
	// Update CSS class to the value specified in the cssclass attribute
	curControl.className = 'normalpanel';
	
	// Set content of element to the server response
	curControl.innerHTML = req.responseText;
	
	// Clear window status
	window.status='';
	
	// Invoke the onloaded event handler (this is not rendered
	// if there is no event handler specified in the oncleared
	// attribute)
	window['onCityPanelLoaded']();
}

	

function onHide_cityPanel() { 
	// Invoke the onclear event. 
	// If true is not returned by the event handler, 
	// the action is cancelled and the panel remains 
	// visible
	if(!window['onCityPanelClear']()) { 
		return; 
	}
	
	// Retrieve the update panel container
	var controlName = 'cityPanel_Container';
	var curControl= document.getElementById(controlName);
	
	// If control wasn't found, return
	if (curControl == null) {
		alert(controlName + ' control not found!');
		return;
	}
	
	// Clear tag
	curControl.innerHTML = '';
	
	// Invoke the oncleared event handler (this is not rendered
	// if there is no event handler specified in the oncleared
	// attribute)
	window['onCityPanelCleared']();
}

	

<tag>
	<name>updatepanel</name>
	<tagclass>com.testwebsite.controls.updatepanel.UpdatePanelTag</tagclass>
	<bodycontent>JSP</bodycontent>
	<info>Update Panel tag.</info>
	<!-- Panel ID-->
	<attribute>
		<name>id</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Url to fragment-->
	<attribute>
		<name>url</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Message displayed while retrieving panel content-->
	<attribute>
		<name>updatemessage</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Loading CSS class name -->
	<attribute>
		<name>loadingcss</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>		
	<!-- CSS class name (Post loading) -->
	<attribute>
		<name>cssclass</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Event: on clear -->
	<attribute>
		<name>onclear</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Event: on cleared -->
	<attribute>
		<name>oncleared</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Event: on loading-->
	<attribute>
		<name>onload</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Event: post loaded-->
	<attribute>
		<name>onloaded</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>

	

<tag>
	<name>panelargument</name>
	<tagclass>com.testwebsite.controls.updatepanel.PanelArgumentTag</tagclass>
	<bodycontent>empty</bodycontent>
	<info>Contains the argument tag.</info>
	<!-- Argument name -->
	<attribute>
		<name>name</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Source field for argument value -->
	<attribute>
		<name>sourcefield</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Value for argument (overrides source field value if specified -->
	<attribute>
		<name>value</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>	

function stateDialog_onShow() {
	// Get dialog control
	var dialogControl = document.getElementById('stateDialog');
	dialogControl.style.display = 'block';
	
	// Set title (if showtitle attribute is not false)
	var titleControl = document.getElementById('stateDialog_dialogTitleText');
	titleControl.innerHTML = 'Select States';
	
	// Get dialog content control
	var dialogContentName = 'stateDialog_dialogContent';
	var contentControl = document.stateDialog_dialogForm[dialogContentName];
	
	// If dialog content control is not null
	if (contentControl != null) {
		contentControl.innerHTML = 'null';
	}
	
	// Initialize XmlHttpRequest object
	initializeXmlHttpRequest();	
	if (req == null) {
		alert('XmlHttpRequest object not initialized.');
	}
	
	// Url for retrieving dialog content (specified in url attribute)
	var targetUrl = '/ajaxcontrols3/fragments/selectState.jsp';
		
	// Build the POST data sent for the asynchronous request to
	// retrieve the dialog content
	// The arguments specified in the optional argument tag(s)
	// contained in the popuparguments tag
	var postData = '';		
	// The dialogName_getPostData function is rendered by the 
	// popuparguments tag (if specified). 
	// Check if the function is defined and if so, invoke the 
	// function
	if (window['stateDialog_getPostData'] != undefined) {
		postData = window['stateDialog_getPostData']();
	}
	
	// Set server response function
	var responseFunction = 'stateDialog_onServerResponse';
	req.onreadystatechange = eval(responseFunction);
	
	// Open server request
	req.open('POST',targetUrl,true);	
	req.setRequestHeader("Content-type", 
		"application/x-www-form-urlencoded");
	req.setRequestHeader("Content-length", 
		postData.length);
	
	// Send data
	req.send(postData);
}		

function stateDialog_onServerResponse() {
	// If loaded
	if(req.readyState!=4) 
		return;
		
	// If an error occurred
	if(req.status != 200) {
		alert('An error occurred retrieving panel content.');
		return;
	}
	
	// Get response
	var responseData = req.responseText;
	
	// Get dialog content pane
	var dialogContentName = 'stateDialog_dialogContent';
	var contentControl = document.getElementById(dialogContentName);
	
	// If dialog content pane found, set the content
	if (contentControl != null) {
		contentControl.innerHTML = responseData;
	}
}

<tag>
	<name>popupdialog</name>
	<tagclass>com.testwebsite.controls.popupdialog.PopupDialogTag</tagclass>
	<bodycontent>JSP</bodycontent>
	<info>Popup Dialog tag.</info>
	<!-- Popup ID-->
	<attribute>
		<name>id</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Popup Title-->
	<attribute>
		<name>title</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Show Title -->
	<attribute>
		<name>showtitle</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Show Close Button -->
	<attribute>
		<name>showclose</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute> 
	<!-- Size Width -->
	<attribute>
		<name>width</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Size Height -->
	<attribute>
		<name>height</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Size Content Height -->
	<attribute>
		<name>contentheight</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>		
	<!-- Position Left -->
	<attribute>
		<name>left</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Position Top-->
	<attribute>
		<name>top</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Url to fragment-->
	<attribute>
		<name>url</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Message displayed while retrieving panel content-->
	<attribute>
		<name>updatemessage</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>

		
function cityDetailsDialog_getPostData() {	
	var data = 'dialogName=cityDetailsDialog'
			+ '&zipCode=' + getFormValue('selectedZipCode');
	return data;
}

		
public int doStartTag() throws JspException {
	StringBuffer html = new StringBuffer();
	
	String dialogName = this.getDialogName();
	
	html.append("<script type='text/javascript' language='javascript'>");
	html.append("function ");
	html.append(dialogName);
	html.append("_getPostData() {");
	html.append("var data = 'dialogName=");
	html.append(dialogName);
	html.append("'");
	
	JspWriter out = pageContext.getOut();
	try {
		out.append(html.toString());
	} catch (IOException e) {
		e.printStackTrace();
	}
	
	return PopupDialogArgumentContainerTag.EVAL_BODY_INCLUDE;
}

		
public int doEndTag() throws JspException {
	StringBuffer html = new StringBuffer();
	
	html.append(";");
	html.append("return data;");
	html.append("}");
	html.append("</script>");
	
	// Write output
	JspWriter out = pageContext.getOut();
	try {			
		out.append(html.toString());
	} catch (IOException e) {
		e.printStackTrace();
	}
	
	return PopupDialogArgumentContainerTag.EVAL_PAGE;
}

<tag>
	<name>popuparguments</name>
	<tagclass>com.testwebsite.controls.popupdialog.PopupDialogArgumentContainerTag
	</tagclass>
	<bodycontent>JSP</bodycontent>
	<info>Popup Dialog Argument Container</info>
	<!-- Popup Argument Container ID-->
	<attribute>
		<name>id</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>

<tag>
	<name>popupargument</name>
	<tagclass>com.testwebsite.controls.popupdialog.PopupArgumentTag</tagclass>
	<bodycontent>empty</bodycontent>
	<info>Contains the argument tag.</info>
	<!-- Argument name -->
	<attribute>
		<name>name</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Source field for argument value -->
	<attribute>
		<name>sourcefield</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- Value for argument (overrides source field value if specified) -->
	<attribute>
		<name>value</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>

public int doStartTag() throws JspException {
	StringBuffer html = new StringBuffer();
	
	// Get button container
	PopupDialogButtonContainerTag buttonPane = 
		(PopupDialogButtonContainerTag) this.getParent();
	String dialogName = buttonPane.getDialogName();
	
	// Render button
	html.append("<input type='button' id='");
	html.append(this.getId());
	html.append("' class='");
	html.append(this.getCssclass());
	
	String buttonLabel = this.getLabel();
	if (buttonLabel != null && buttonLabel.length() > 0) {
		html.append("' value='");
		html.append(buttonLabel);
	}
	
	html.append("' onclick='");
					
	// Check button type and render event handler accordingly
	String buttonType = this.getType();
	if (buttonType == null || 
			buttonType.length() < 1 || 
			buttonType.equalsIgnoreCase("cancel")) {
		html.append("closeDialog(\"");
		html.append(dialogName);
		html.append("\")");
	}
	else {
		html.append(this.getOnclick());
		html.append("(\"");
		html.append(dialogName);
		html.append("\", document.");
		html.append(dialogName);
		html.append("_dialogForm)");
	}
	html.append("'/>");
	
	
	// Write output
	JspWriter out = pageContext.getOut();
	try {
		out.append(html.toString());
	} catch (IOException e) {
		e.printStackTrace();
	}

	return PopupButtonTag.EVAL_BODY_BUFFERED;
}		

<tag>
	<name>popupbuttoncontainer</name>
	<tagclass>com.testwebsite.controls.popupdialog.PopupDialogButtonContainerTag
	</tagclass>
	<bodycontent>JSP</bodycontent>
	<info>Popup Dialog Button Container</info>
	<!-- Popup Button Container ID-->
	<attribute>
		<name>id</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>

<tag>
	<name>popupbutton</name>
	<tagclass>com.testwebsite.controls.popupdialog.PopupButtonTag</tagclass>
	<bodycontent>empty</bodycontent>
	<info>Contains the argument tag.</info>
	<!-- Button id -->
	<attribute>
		<name>id</name>
		<required>true</required>
		<rtexprvalue>true</rtexprvalue>
	</attribute>
	<!-- Button label -->
	<attribute>
		<name>label</name>
		<required>false</required>
		<rtexprvalue>true</rtexprvalue>
	</attribute>
	<!-- Type of button -->
	<attribute>
		<name>type</name>
		<required>true</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- onclick Event handler -->
	<attribute>
		<name>onclick</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
	<!-- CSS class name -->
	<attribute>
		<name>cssclass</name>
		<required>false</required>
		<rtexprvalue>false</rtexprvalue>
	</attribute>
</tag>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="ajax" uri="/WEB-INF/tlds/ajax_controls.tld"%>
<html>
<head>
<title>Locations</title>

<link href="core.css" rel="stylesheet" type="text/css" />
<ajax:page/>

<script type='text/javascript' language='javascript'>
function onCityPanelCleared() {
var msgControl = document.getElementById('statusMessage');			
if (msgControl != null) {
msgControl.innerHTML = 'oncleared'; 
}
}

function onCityPanelClear() {
var msgControl= document.getElementById('statusMessage');
if (msgControl != null) {
msgControl.innerHTML = 'onclear'; 
}
return true;
}

function onCityPanelLoad() {
var msgControl = document.getElementById('statusMessage');
if (msgControl != null) {
msgControl.innerHTML = 'onload'; 
}
return true;
} 		 		

function onCityPanelLoaded() {			
var msgControl= document.getElementById('statusMessage');			
if (msgControl != null) {
msgControl.innerHTML = 'onloaded';				
}
}

function displayCityPanel(curControl) {
if (!curControl.checked) {	
hideUpdatePanel('cityPanel');
} 
}

function retrieveCityData() {			
showUpdatePanel('cityPanel');
document.all.showCityPanel.checked = 'checked';
}
</script>
</head>

<body>
<b>State: </b>
<select id="state" onchange="retrieveCityData()">
<option value=''> </option>
<option value='AK'> Alaska</option>
<option value='AL'> Alabama</option>
<option value='AR'> Arkansas</option>
...
...
<option value='WI'> Wisconsin</option>
<option value='WV'> West Virginia</option>
<option value='WY'> Wyoming</option>
</select><br/>

<b>City Prefix: </b>
<input type="text" id="cityPrefix" onkeyup="retrieveCityData()"/>
<br/>

<input type="checkbox" 
id="showCityPanel" 
name="showCityPanel"
checked="checked" 
onclick="displayCityPanel(this)" />Show City Panel<br/>

<div><b>Result: </b><span id="statusMessage"></span></div>

<div>		
<ajax:updatepanel id="cityPanel" 
url="/fragments/cityList.jsp" 
updatemessage="Retrieving cities..."
cssclass="normalpanel"
loadingcss="loadingpanel"
onclear="onCityPanelClear"
oncleared="onCityPanelCleared"
onloaded="onCityPanelLoaded"
onload="onCityPanelLoad">

<ajax:panelargument name="state" sourcefield="state"/>
<ajax:panelargument name="cityPrefix" sourcefield="cityPrefix"/>
</ajax:updatepanel>
</div>

</body>
</html>

<%@ page language="java" contentType="text/html; 
	charset=ISO-8859-1"  pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="ajax" 
uri="/WEB-INF/tlds/ajax_controls.tld"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=ISO-8859-1">
<title>Search Locations</title>
<link href="core.css" rel="stylesheet" 
type="text/css" />
<script type="text/javascript">
function onSaveStates(dialogName, dialogForm) {
var values = '';		
var stateList = dialogForm.states;
for (var i = 0; i < stateList.length; i++) {
if (stateList[i].checked) {
if (values.length != 0) {		   
values += ", ";
}
values += stateList[i].value;
}
}

var targetControl = document.getElementById('selectedStates');
targetControl.value = values;

closeDialog(dialogName);
}
</script>
<ajax:page id="page"/>
</head>
<body>
<h1>Report Criteria</h1>
<table width="80%" >
<colgroup>
<col width="40%"/> 
<col width="60%"/>
</colgroup>
<tbody>
<tr>
<td align="right" style="border:none;">
<span style="font-weight:bold">Zip Code:&nbsp;
</span>
</td>
<td align="left" style="border:none;">
<input type="text"
size="50" 
id="zipCode" />
</td> </tr>
<tr>
<td align="right" style="border:none;">
<span style="font-weight:bold">States:&nbsp;
</span>
</td>
<td align="left" style="border:none;">
<input type="text"
size="50" 
readonly="readonly" 
id="selectedStates" 
onclick="showDialog('stateDialog')"/>
</td> </tr>
</tbody>
<thead>
<th colspan="2" class="subHeading">
Search Locations</th>
</thead>
<tfoot>
<tr>
<td colspan="2">
<input type="button" class="dialogButton" 
value="Run Report" id="runReport"/>
</td> </tr>
</tfoot>
</table>		

<ajax:popupdialog url="/ajaxcontrols3/fragments/selectState.jsp" 
id="stateDialog" 
width="400px" height="28em"
left="0" top="0" 
title="Select States" 
contentheight="23em">
<ajax:popuparguments id="stateDialogArgs">
<ajax:popupargument name="arg1" value="test1"/>
<ajax:popupargument name="arg2" value="test2"/>
</ajax:popuparguments>
<ajax:popupbuttoncontainer id="stateDialogButtons">
<ajax:popupbutton id="cancelButton" 
label="Cancel" type="cancel"/>&nbsp;
<ajax:popupbutton id="saveButton" label="Save" 
type="normal" onclick="onSaveStates"/>
</ajax:popupbuttoncontainer>	
</ajax:popupdialog>

<h1>Report Results</h1>
<div>Show report results here...</div>
</body>
</html>

<%@ page language="java" contentType="text/html; 
charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="com.testwebsite.dal.LocationDataService" %>
<%@ page import="com.testwebsite.dto.LocationDTO" %>
<%@ page import="com.testwebsite.dto.StateDTO" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.TreeMap" %>
<%@ page import="java.util.Set" %>


<ul style="list-style: none;"
		<%
		TreeMap<String, StateDTO> stateData = 
			LocationDataService.getStateData();
		
		// Iterate through all data looking for matching 
		// cities and add to temporary TreeMap
		Set<String> keySet = stateData.keySet();
		Iterator<String> stateIter = keySet.iterator();		
		while (stateIter.hasNext()) {
			// Get current state
			String curKey = stateIter.next();
			StateDTO curState = stateData.get(curKey);
			
			out.println("<li><input type='checkbox' 
				name='states' value='");
			out.println(curState.getAbbreviation());
			out.println("'/>&nbsp;");
			out.println(curState.getName());
			out.println("</li>");
		}
		%>
</ul>

<html><head>
<title>New York City Listing</title>
	<ajax:page/>
<link href="core.css" rel="stylesheet" 
		type="text/css" />
</head>
<script type="text/javascript">	
	
	function showCityDialog(zipCode) {
		var xPosition = 0;
		var yPosition = 0;
		if (!e) var e = window.event;
		if (e.pageX || e.pageY) 	{
			posx = e.pageX;
			yPosition = e.pageY;
		}
		else if (e.clientX || e.clientY) 	{
			xPosition = e.clientX + document.body.scrollLeft
				+ document.documentElement.scrollLeft;
			yPosition = e.clientY + document.body.scrollTop
				+ document.documentElement.scrollTop;
		}
		
		var dialogControl = document.getElementById("cityDetailsDialog");
		if (dialogControl != null) {
			dialogControl.style.top = yPosition;
			dialogControl.style.left = xPosition;
		}		
		// Get selected zip code
		var zipCodeControl = document.getElementById("selectedZipCode");
		if (zipCodeControl != null) {
			zipCodeControl.value = zipCode;
			showDialog('cityDetailsDialog');
		}
	}	
</script>
<body>
<table cellpadding="0" cellspacing="0" width="60%">	
		<tbody> <%
		TreeMap<Integer, LocationDTO> locData = 
			LocationDataService.getLocationData();
		// Temp map to ensure only unique cities are added. 
		HashMap tempMap = new HashMap(); 
		// Iterate through all data looking for matching cities and add to 
		// temporary TreeMap
		Set<Integer> keySet = locData.keySet();
		Iterator<Integer> locIter = keySet.iterator();		
		while (locIter.hasNext()) {
			// Get current state
			Integer curKey = locIter.next();
			LocationDTO curLocation = locData.get(curKey);			
			String curState = curLocation.getState();			
			String curCity = curLocation.getCity();
			String lowerCurCity = curCity.toLowerCase();			
			if (!tempMap.containsKey(curCity) && 
				curState.equalsIgnoreCase("NY")) {
				tempMap.put(curCity, curCity);
				out.println("<tr>");
				out.println("<td><a href='#' 
					style='text-decoration:none;color' 
					onMouseOver=\"showCityDialog('" + 
					curLocation.getZipCode() + 
					"')\" >");
				out.println(curLocation.getZipCode());
				out.println("</td>");
				out.println("<td>");
				out.println(curLocation.getCity());
				out.println("</td>");			
				out.println("<td>");
				out.println(curLocation.getCounty());
				out.println("</td>");
				out.println("</tr>");
			}
		} %>
		</tbody>
		<thead> <tr>
<th colspan="3"><b>Cities</b></th></tr>
<tr>
<th class="subHeading">	<b>Zip Code</b></th>
<th class="subHeading">
	<b>City</b></th>
	<th class="subHeading">
	<b>County</b></th>
	</tr> </thead>
	</table>
	<input type="hidden" id="selectedZipCode" 
		value=""/>
	<ajax:popupdialog url="/ajaxcontrols3/fragments/cityDetails.jsp" 
		id="cityDetailsDialog" width="400px" 
		left="0" top="0" title="City Information" 
		height="10.5em" contentheight="8.5em">
		<ajax:popuparguments id="stateDialogArgs">
			<ajax:popupargument name="zipCode" 
				sourcefield="selectedZipCode"/>
		</ajax:popuparguments>
	</ajax:popupdialog>
</body></html>

<%@ page language="java" contentType="text/html; 
	charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="com.testwebsite.dal.LocationDataService" %>
<%@ page import="com.testwebsite.dto.LocationDTO" %>
<%@ page import="com.testwebsite.dto.StateDTO" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.TreeMap" %>
<%@ page import="java.util.Set" %>

<%
TreeMap<Integer, LocationDTO> locData = LocationDataService.getLocationData();
String zipCodeStr = request.getParameter("zipCode"); 
Integer zipCode = new Integer(zipCodeStr);
LocationDTO curLocation = locData.get(zipCode);
if (curLocation != null) {
	out.println("<div id='cityDetails'>");
	
	// Render zip code
	out.println("<div>");		
	out.println("<span style='font-weight:bold;color: 
		#00628B'>Zip Code:&nbsp;</span>");
	out.println("<span style='color: #00628B'>");
	out.println(curLocation.getZipCode());
	out.println("</span>");
	out.println("</div>");
	
	// Render city name
	out.println("<div>");		
	out.println("<span style='font-weight:bold;color: 
		#00628B'>City:&nbsp;</span>");
	out.println("<span style='color: #00628B'>");
	out.println(curLocation.getCity());
	out.println("</span>");
	out.println("</div>");
	
	// Render county name
	out.println("<div>");		
	out.println("<span style='font-weight:bold;color: 
		#00628B'>County:&nbsp;</span>");
	out.println("<span style='color: #00628B'>");
	out.println(curLocation.getCounty());
	out.println("</span>");
	out.println("</div>");
	
	// Render state
	out.println("<div>");		
	out.println("<span style='font-weight:bold;color: 
		#00628B'>State:&nbsp;</span>");
	out.println("<span style='color: #00628B'>");
	out.println(curLocation.getState());
	out.println("</span>");
	out.println("</div>");
	
	// Render longitude
	out.println("<div>");		
	out.println("<span style='font-weight:bold;color: 
		#00628B'>Longitude:&nbsp;</span>");
	out.println("<span style='color: #00628B'>");
	out.println(curLocation.getLongitude());
	out.println("</span>");
	out.println("</div>");
	
	// Render latitude
	out.println("<div>");		
	out.println("<span style='font-weight:bold;color: 
		#00628B'>Latitude:&nbsp;</span>");
	out.println("<span style='color: #00628B'>");
	out.println(curLocation.getLatitude());
	out.println("</span>");
	out.println("</div>");
	
	out.println("</div>");
}
%>