AppFuseAjaxWithDWR_CompleteJSP

Complete personList.jsp for the AJAX/DWR tutorial.

<%@ include file="/common/taglibs.jsp"%>

<script type='text/javascript' src='/ajax-tutorial/dwr/interface/personDetailDWRManager.js'></script>
<script type='text/javascript' src='/ajax-tutorial/dwr/engine.js'></script>
<script type='text/javascript' src='/ajax-tutorial/dwr/util.js'></script>
<script type="text/javascript">
<!--
	//a global variable to store the person's first name between server-calls.
	//calls to DWR-Managers perform asynchrounasly...
	var pickedPerson;
	
	//#
	//# This function gets called onMouseOver and retrieves the data from the server.
	//#
	function getDetails(personID, firstName)
	{
		//store the picked person name for further use
		pickedPerson = firstName;
		//retrive the job details from the server.
		personDetailDWRManager.getJob(personID, showJob);
		//retrive the pet details from the server.
		personDetailDWRManager.getPets(personID, showPets);
		//show the div containing the details table.
		document.getElementById("detailDiv").style.visibility='visible';
	}
	
	//#
	//# A callback funtion beeing called from DWR. The parameter is inserted by DWR and
	//# will be the result of the personDetailManager.
	//# It inserts the job information intothe jobTable. This is done using DWRUtil.addRows.
	//#
	function showJob(job)
	{
		//clear all inner html from the table containing the job information.
		clearHtml(document.getElementById("jobTable"));
		DWRUtil.addRows("jobTable", [job], [appendJobName, appendJobDescription]);
	}
	
	//#
	//# Another callback function beeing called from DWRUtil.addRows.
	//# It simply returnes the job's name.
	//#
	function appendJobName(job)
	{
		return pickedPerson + "'s job: " + job.jobname;
	}

	//#
	//# Yet another callback function beeing called from DWRUtil.addRows.
	//# It simply returnes the job's description.
	//#
	function appendJobDescription(job)
	{
		return job.jobdesc;
	}
	
	//#
	//# A callback funtion beeing called from DWR. The parameter is inserted by DWR and
	//# will be the result of the personDetailManager. The parameter is the result of 
	//# personDetailManager.getPets(personID) which returnes a list. Again DWRUtils.addRows
        //# is used to fill the data into the table.
	//#
	function showPets(pets)
	{
		clearHtml(document.getElementById("petTable"));
		DWRUtil.addRows("petTable", pets, [appendPetName, appendPetType]);
	}
	
	//#
	//# Another callback function beeing called from DWRUtil.addRows.
	//# It simply returnes the pet's name.
	//#
	function appendPetName(pet)
	{
		return pet.petname;
	}
	
	//#
	//# Yet another callback function beeing called from DWRUtil.addRows.
	//# It simply returnes the pet's animal kind.
	//#
	function appendPetType(pet)
	{
		return pet.pettype;
	}
	
	//#
	//# Utility function clearing a HTML-element of all children.
	//# Called to clear any previouse entered information from the detail tables.
	//#
	function clearHtml(node)
	{
		while(node.firstChild != null)
		{
			node.removeChild(node.firstChild);
		}
	}
	//#
	//# Utility function hiding the div wiht the detail tables.
	//# Called onMouseOut.
	//#
	function hideDetailDiv()
	{
		document.getElementById("detailDiv").style.visibility='hidden';
	}
	
//-->
</script>
<title><fmt:message key="personList.title"/></title>
<content tag="heading"><fmt:message key="personList.heading"/></content>

<c:set var="buttons">
    <button type="button" style="margin-right: 5px"
        onclick="location.href='<c:url value="/editPerson.html"/>?method=Add&from=list'">
        <fmt:message key="button.add"/>
    </button>

    <button type="button" onclick="location.href='<c:url value="/mainMenu.html"/>'">
        <fmt:message key="button.cancel"/>
    </button>
</c:set>
<c:out value="${buttons}" escapeXml="false"/>
<br/><br/>
<table cellspacing="0" cellpadding="0" class="list" border="1">
 <thead>
  <tr>
	<th bgcolor="#CCCCCC"><fmt:message key="person.firstName"/></th>
	<th bgcolor="#CCCCCC"><fmt:message key="person.lastName"/></th>
	<th bgcolor="#CCCCCC"><fmt:message key="person.id"/></th>
  </tr>
 </thead>
  <tbody id="personList">
  <ww:iterator value="persons">
   <tr>
	 <td>
	 <a 
	 	href="#" 
	 	onmouseover="javascript:getDetails('<ww:property value="id"/>', '<ww:property value="firstName"/>')" 
	 	onmouseout="javascript:hideDetailDiv()">
	 		<ww:property value="firstName"/>
	 </a>
	 </td>
	 <td>
	 <a 
	 	href="#" 
	 	onmouseover="javascript:getDetails('<ww:property value="id"/>', '<ww:property value="firstName"/>')" 
	 	onmouseout="javascript:hideDetailDiv()">
	 		<ww:property value="lastName"/>
	 </a>
	 </td>
	 <td>
	 <ww:property value="id"/> <a href='<c:url value="editPerson.html?"/>id=<ww:property value="id"/>'><fmt:message key="person.edit"/></a>
	 </td>
   </tr>
  </ww:iterator>
 </tbody>
</table>

<div id="detailDiv" style="visibility:hidden">
	<table cellspacing="0" cellpadding="0" class="list">
		<thead>
			<tr>
				<th width="50%"><fmt:message key="person.jobname.heading"/></th>
				<th width="50%"><fmt:message key="person.jobdesc.heading"/></th>
			</tr>
		</thead>
		<tbody id="jobTable">
		</tbody>
	</table>
	<br/>
	<table cellspacing="0" cellpadding="0" class="list">
		<thead>
			<tr>
				<th width="50%"><fmt:message key="person.petname.heading"/></th>
				<th width="50%"><fmt:message key="person.pettype.heading"/></th>
			</tr>
		</thead>
		<tbody id="petTable">
		</tbody>
	</table>
</div>


<script type="text/javascript">
highlightTableRows("personList");
</script>

Back to the article