Add AJAX to JSP with AjaxTags

AjaxTags is a set of JSP tags designed to make it easy to add AJAX to Java JSP sites. Each tag implements a specific widget. These tags include support for an auto-complete text box, pop-up balloons, multistep select boxes, tabbed panels, and area displays. Tags are also offered for making HTML content replacement. Prototype, scriptaculous, and OverLIB are used on the client side. XML is used for communication between the client and the server.

Download Ajax JSP Tag Library

The latest version of AjaxTags is 1.2-beta2.You can download it from sourceforge

Install Ajax JSP Tag Library

Requirements

To use Ajax JSP Tag Library, you’ll need the following:

  1. JDK 1.4+
  2. Servlet container running Servlets 2.3+ and JSP 1.0+ (e.g. tomcat5.*, resin 3.*)
  3. Copy of the Prototype framework. Currently, we depend upon version 1.4.0.
  4. Copy of the Scriptaculous library. Currently, we depend upon version 1.5.1.
  5. Copy of the OverLIBMWS library.

Installation and Set Up

Copy the ajaxtags-1.2.jar into your WEB-INF/lib directory.

Define TLD Reference

For JSP 1.x users, copy the ajaxtags.tld file to your WEB-INF directory and include a taglib reference in your web.xml file.

<taglib>
<uri>http://ajaxtags.org/tags/ajax</uri>
<location>/WEB-INF/ajaxtags.tld</location>
</taglib>

Create Server-side Handler

<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response>
<item>
<name>Record 1</name>
<value>1</value>
</item>
<item>
<name>Record 2</name>
<value>2</value>
</item>
<item>
<name>Record 3</name>
<value>3</value>
</item>
</response>
</ajax-response>

Declare TLD Reference on JSP

For each JSP in which you wish to use the AJAX tag, simply define it as with any other tag library.

<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

Include JavaScript Core

<script type="text/javascript" src="prototype-1.4.0.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="overlibmws.js"></script>
<script type="text/javascript" src="ajaxtags-1.2.js"></script>

Define CSS Styles

AJAX JSP Tag Library Autocomplete Demo

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>AJAX JSP Tag Library Autocomplete Demo</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/prototype-1.4.0.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/overlibmws.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajaxtags-1.2-beta2.js"></script>
<link rel="stylesheet" type="text/css" href="css/ajaxtags.css" />
<link rel="stylesheet" type="text/css" href="css/displaytag.css" />
</head>
<body>
<c:set var="contextPath" scope="request">${pageContext.request.contextPath}</c:set>
<div id="content">
<h1>Autocomplete Demo</h1>
<form action="." class="basicForm">
<fieldset>

<p>Available values start with letters: 'A', 'C', 'E', 'F', 'M', 'R', 'T'</p>

<label for="model">Name:</label>
<input id="model" name="model" type="text" size="30" />
<span id="indicator" style="display:none;"><img src="${contextPath}/img/indicator.gif" /></span>

<label for="make">Make:</label>
<input id="make" name="make" type="text" size="30" />
</fieldset>
</form>
<div id="errorMsg" style="display:none;border:1px solid #e00;background-color:#fee;padding:2px;margin-top:8px;width:300px;font:normal 12px Arial;color:#900"></div>

<ajax:autocomplete
source="model"
target="make"
baseUrl="${contextPath}/autocomplete.view"
className="autocomplete"
indicator="indicator"
minimumCharacters="1"
parser="new ResponseXmlToHtmlListParser()" />

</body>
</html>

Leave a comment