To install - just download binary zip file and extract it to /phpAjaxTags folder under Your root WWW dir.
Select Tag Demo
The ajax:select tag allows one to retrieve a list of values from a backend servlet
(or other server-side control) and display them in another HTML select box.
Here, the example asks the user to select a make from a list of car makers. Once selected, the
XMLHttpRequest object calls a servlet to retrieve all models for that make, which are then
populated in the second dropdown.
Post-functions execute after the AJAX piece is finished its work. In this case, we define a
post-function to display an image of the car maker.
The ajax:autocomplete tag allows one to retrieve a list of probable values from a
backend servlet (or other server-side control) and display them in a dropdown beneath an HTML
text input field.
The user may then use the cursor and ENTER keys or the mouse to make a selection from that list
of labels, which is then populated into the text field. This JSP tag also allows for a second
field to be populated with the value or ID of the item in the dropdown.
You'll notice that an image is used to indicate a busy state while the XMLHttpRequest object is
source to see how it's done.
The ajax:callout tag is an easy way to attach a callout or popup balloon to any
HTML element supporting an onclick event. The style of this callout is fairly flexible, but
generally has a header/title, a close link ('X'), and the content itself, of course.
You may also set a timeout on the callout to disappear after some time has passed (expressed in
milliseconds). Alternately, you have it not timeout at all and, thereby, can force the user to
close the callout manually (by clicking the close link).
You must include a generic DIV tag to act as the container for all popups. This is primarily to
get around an IE bug/feature that (in some cases) prevents inserting DOM elements after the
Click the "definition" link below to send a request to the backend servlet, retrieve the callout
content, and display the callout itself.
Callout in Action
The Hitchhiker's Guide to the Galaxy is a science fiction series written by Douglas Adams
(1952?2001). The series follows the adventures of
Arthur Dent, a hapless
Englishman who escapes the destruction of
Earth by an alien race called the Vogons with
his friend Ford Prefect, an alien from a
small planet somewhere in the vicinity of
Betelgeuse and researcher for the eponymous
guide. Zaphod Beeblebrox, Ford's semi-cousin
and part-time Galactic President, unknowingly saves the pair from certain death. He brings them
aboard his stolen spaceship, the
Heart of Gold, whose crew rounds out the main
cast of characters:
Marvin the Paranoid Android (a severely
depressed robot), and Trillian, a woman known
by Arthur as the only other surviving human being. After this, the characters get involved in a
quest to find legendary planet of Magrathea
and the Question to the Ultimate Answer.
And this is another example using onmouseover
event with no title.
The ajax:htmlContent tag fills a content area (e.g., DIV tag) with an HTML fragment
from another resource. You may find this tag useful for including blocks of information in a
sidebar when the user clicks a link or form field. This tag is a more simplified approach to
the ajax:portlet and ajax:tabPanel tags.
Shown below are three different ways of executing the AJAX event: link, radio button, and select
The ajax:portlet tag mimics a true portlet (in the
JSR-168 sense) by allowing you to define a
portion of the page that pulls content from another location using Ajax with or without a
periodic refresh. It expects the resource to return a valid HTML fragment, but not a complete
In the example below, the portlet is set to refresh automatically every 5 seconds. In addition,
each of the optional toolbar elements (refresh, sizing, and close) is defined.
The ajax:tabPanel tag provides a tabbed page view of content from different
resources, typically other JSP or HTML pages. It expects the resource to return a valid HTML
fragment, but not a complete page.
Each panel is defined in a ajax:tab child tag with its own unique URL. The tab
panel relies heavily on CSS to structure the panels themselves. The output is generated as an
unordered list (<ul>) which works very nicely with the styles cataloged at