Using JavaScript and Ajax - Stripes...and Java Web Development is Fun Again - page 340

Figure 15.10: The initial Ajax Contact List page
We'll be using jQuery for these examples, so the first thing to do is to
import the library:
Download email_36/web/WEB-INF/jsp/common/layout_main.jsp
<script type="text/javascript"
src="${contextPath}/js/jquery.js"> </script>
The JSP for the contact list includes placeholders for the contact table,
contact details, and contact form, which are all page fragments that are
inserted into their respective containers:
Download email_36/web/WEB-INF/jsp/contact_list.jsp
<s:layout-render name="/WEB-INF/jsp/common/layout_menu.jsp"
title="${title}" currentSection="ContactList">
<s:layout-component name="body">
<!-- ... -->
<div id="contact_table" style="float: left">
<%@include file="/WEB-INF/jsp/parts/contact_table.jsp"%>
</div>
<div id="contact_details" style="float: left"></div>
<div style="clear: both"></div>
<div id="contact_form"></div>
</s:layout-component>
</s:layout-render>
The initial page is shown in Figure 15.10 . Notice the Filter text field at
the top and the icons for the View, Update, and Delete links. All controls
will issue Ajax requests and modify portions of the page. Let's look at
each feature, starting with the Filter field.