articles >> general ajax >> AjaxTags Tutorial (Part 2)

AjaxTags Tutorial (Part 2)

By : Mamun Zaman Jul 09, 2007

Printer friendly

Page 2 / 2

This server side code in some cases may take too much time. In such instances you can show an indicator or progress bar while processing. To do this you need to set the indicator attribute of ajax:autocomplete. The Indicator attribute usually points to a div or span element that will be enabled while the results are being loaded. It is disabled at start, and disabled again when results come back. The div or span element usually contains an animated GIF showing progress like progress bar.

<fieldset>
<legend>Autocomplete with indicator</legend>
<form>
<label for="country">Country Name:</label>
<input type="text" name="country" id="country"/>
<span id="indicatorRegion" style="display:none;">
<img src="images/progress_bar.gif"/>
Loading...
</span>
</form>

<ajax:autocomplete
source="country"
target="country"
baseUrl="country_list.view"
className="autocomplete"
minimumCharacters="1"
indicator="indicatorRegion"/>
</fieldset>

 

Creating Cascading Drop Downs

Using AjaxTags you can create cascading drop downs (when first one changes, result is sent to server and used to compute values for second) easily. This can be done using ajax:select tag.

<fieldset>

<legend>ajax:select example</legend>

<form>
<label for="make">Make:</label>
<select id="make">
<option value="">Select Make</option>
<option value="Nokia">Nokia</option>
<option value="SonyEricsson">SonyEricsson</option>
<option value="BenQ">BenQ</option>
<option value="O2">O2</option>
<option value="Motorola">Motorola</option>
<option value="Apple">Apple</option>
<option value="HTC">HTC</option>
</select>
<label for="model">Model:</label>
<select id="model" disabled="disabled">
<option value="">Select Model</option>
</select>
</form>

<ajax:select
source="make"
target="model"
baseUrl="model-finder.ajax"
parameters="make={make}" />
</fieldset>

Here you can see two drop down elements, one is make and other is model. If you select anything from make then corresponding models will be loaded to model drop down. Remember, you must add a dummy option at the beginning. Ajax requests will be triggered after select value changes. So, you need the dummy option. 2nd Select element is disabled at beginning. If first select value changes, AjaxTags will request for server response and populate second select accordingly. This tag must appear after form tag. All the tags those require id values in source and target must appear after form tag.

 

htmlContent Tag

Ajax:htmlContent must be placed below form. When some source element (like button) clicked, server-side resource is invoked and return values placed inside html area (usually a div or span). Attribute source is the id of the button or other element that will trigger submission. Attribute target is the id of the html element where results from server will go. Server side resource should return regular HTML, not XML. Here is an example of single trigger.

<fieldset>
<form>
<label for="make">Make:</label>
<select id="make">
<option value="">Select Make</option>
<option value="Nokia">Nokia</option>
<option value="SonyEricsson">SonyEricsson</option>
<option value="BenQ">BenQ</option>
<option value="O2">O2</option>
<option value="Motorola">Motorola</option>
<option value="Apple">Apple</option>
<option value="HTC">HTC</option>
</select>
<label for="model">Model:</label>
<select id="model" disabled="disabled">
<option value="">Select Model</option>
</select>
<input type=button id=showprice value=”SHOW PRICE”>
<span id=”price”></span>
</form>

<ajax:select
source="make"
target="model"
baseUrl="model-finder.ajax"
parameters="make={make}" />
<ajax:htmlContent
baseUrl="price-finder.ajax"
source=”showprice”
target="price"
parameters="model={model},make={make}"/>
</fieldset>

Here showprice is used for single trigger. We can use multiple triggers for ajax:htmlContent. To do this we need to remove source attribute and add sourceClass attribute. Value of sourceClass is the CSS class of an element. All the elements that have a CSS class name same as sourceClass can be used for trigger. Example of multiple triggers is below.

<form>
…
<input type="button" value="Show Price" class="trigger"/>
<a href="javascript://no-op" class="trigger">Show Price</a>
<input type="radio" class="trigger"/>Show Price
…
<span id=”price”></span>
</form>

<ajax:htmlContent
baseUrl="price-finder.ajax"
sourceClass=”trigger”
target="price"
parameters="model={model},make={make}"/>

The other tags are –

ajax:area
Defines a region and forces all links to be loaded back inside same region instead of refreshing the entire page.

ajax:callout
The callout tag associates a callout or popup balloon to any HTML element supporting an onClick event. AjaxTags uses OverLIBMWS JavaScript library for ajax:callout tags.

ajax:displayTag
The displayTag is similar to the area tag. Allow pagination and sorting.

ajax:portlet
It defines a portion of the page that expects content from another location using Ajax with or without a periodic refresh.

ajax:toggle
The toggle tag uses a single image to represent the display of the ratings with the help of CSS to manage the mouseover or mouseout.

ajax:tree
Generate JavaScript code to build a tree.

For more information about the attributes and parser please go to AjaxTags usage page at http://ajaxtags.sourceforge.net/usage.html. You will also find all the necessary JavaScript libraries, demo war files and CSS style sheets in AjaxTags download pages.