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.

This example also demonstrates the use of a post-function (written in JavaScript). 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.

PHP source:

<? pat_Select(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=select2&make={make3}',
	'source'=>'make3',
	'emptyFunction'=>'handleEmpty',
	'postFunction'=>'showMakerEmblem',
	'target'=>'model3',
	));
?>

Autocomplete Demo

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 making it's request to the server-side. This is a bit of JavaScript/CSS trickery--check the source to see how it's done.

PHP source:

<? pat_autocomplete( array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'source'=>'model',
	'target'=>'make',
	'className'=>'autocomplete',
	'parameters'=>'action=autocomplete&model={model}',
	'progressStyle'=>'throbbing',
	'minimumCharacters'=>1,
	));
?>

Callout Tag Demo

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 webpage loads.

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.

PHP source:

<? pat_callout(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=callout&q={ajaxParameter}',
	'timeout'=>"2000",
	'title'=>'Definition',
	'classNamePrefix'=>"callout",
	'sourceClass'=>"definition",
	'boxPosition'=>"bottom right",
));

pat_callout(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=callout&q={ajaxParameter}',
	'timeout'=>"2000",
	'title'=>'Definition',
	'classNamePrefix'=>"callout",
	'sourceClass'=>"definition2",
	'boxPosition'=>"bottom right",
	'eventType'=>"mouseover",
));
?>

Update Form Field Tag Demo

The ajax:updateField tag allows you to update one or more form fields based on the value of another single field.

The example below uses this concept to implement a simple conversion tool.

PHP source:

<? 
pat_updateField(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=updatefield&mph={mph}',
	'action'=>"action",
	'target'=>'kph,mps',
	'source'=>"mph",
));
?>

HtmlContent Tag Demo

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 field.

HtmlContent in Action

Select by ANCHOR link.

Page loaded at: 2008-11-20 09:56:55

PHP source:

<? 
pat_htmlContent(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=htmlcontent&make={ajaxParameter}',
	'sourceClass'=>"contentLink",
	'target'=>'modelDescription',
)); 

pat_htmlContent(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=htmlcontent&make={ajaxParameter}',
	'sourceClass'=>"contentRadio",
	'target'=>'modelDescription',
)); 

pat_htmlContent(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=htmlcontent&make={selmake1}',
	'source'=>"selmake1",
	'eventType'=>"change",
	'target'=>'modelDescription',	
));
?>

Extended HtmlContent Tag Demo

The ajax:phpHtmlContent tag works the same as HtmlContent tag + some additional features.

One is ability to enclose internal links in generated area contents. Check the "Ford" link inside html area - it will reload the contens locally. Of course - You can still use external links.

Another feature is possibility to use custom atribute as data source (see "myAttr").

Extended HtmlContent in Action

Select by ANCHOR link.

Page loaded at: 2008-11-20 09:56:55

PHP source:

<? 
pat_htmlContent(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=htmlcontent&make={ajaxParameter}',
	'sourceClass'=>"extcontentLink",
	'sourceAttribute'=>'myAttr',
	'target'=>'extmodelDescription',
)); 
?>

Portlet Tag Demo

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 page.

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.

Portlet in Action

Ford Portlet

PHP source:

<? 
pat_portlet(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=portlet&make=Ford',
	'imageClose'=>"/phpAjaxTags/img/close.png",
	'imageRefresh'=>"/phpAjaxTags/img/refresh.png",
	'title'=>"Ford Portlet",
	'classNamePrefix'=>"portlet",
	'imageMaximize'=>"/phpAjaxTags/img/maximize.png",
	'imageMinimize'=>"/phpAjaxTags/img/minimize.png",
	'source'=>"portlet_1",
	'refreshPeriod'=>"5",	
));
?>

Tab Panel Tag Demo

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 List-a-Matic.

Tab Panel in Action

PHP source:

<? 
pat_tabPanel(array(
'panelStyleId'=>'tabPanel',
'contentStyleId'=>'tabContent',
'currentStyleId'=>'ajaxCurrentTab',
'tabs'=>array(
	'tabFord'=>array(
		'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
		'caption'=>'Ford',
		'defaultTab'=>'1',
		'parameters'=>'action=tabpanel&make=Ford',
	),
	'tabMazda'=>array(
		'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php?action=tabpanel&make=Mazda',
		'caption'=>'Mazda',
	),
	'tabHonda'=>array(
		'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
		'caption'=>'Honda',
		'parameters'=>'action=tabpanel&make=Honda',
	),
	),
));
?>

Toggle Tag Demo

The ajax:toggle tag will change the value of a hidden form field between true and false, toggle an image between two source files, and replace the inner HTML content of another tag (div, span, etc).

This tag is fairly simple and could be powerful all at the same time. We envision one could use this in a variety of cases such as checking/unchecking recordsets.

Toggle in Action

Toggle Me

Response

PHP source:

<? 
pat_toggle(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php?action=toggle',
	'stateXmlName'=>"toggleState",
	'postFunction'=>'populateResponseContent',
	'image'=>"watched",
	'state'=> "watchedStatus",
	'imagePattern'=>"/phpAjaxTags/img/watched_{0}.gif"
));
?>

Another Simple Select Tag Demo

PHP source:

<? 
pat_Select(array(
	'baseUrl'=>'/phpAjaxTags/demo/sampleAjaxServer.php',
	'parameters'=>'action=select&ob=sel1&vl={sel1}',
	'source'=>'sel1',
	'target'=>'sel2'
	));
?>