Ajax select taglib (Master select) ver. 1.4


    Custom JSP taglib with Ajax support. Lets you create HTML select where any selection allows you to retrieve a list of values from a backend servlet (or other server-side control like JSP) and display them in another HTML select box. In other words you can create a master control and fill a slave (dependent) control based on the master's selection. In order to use this tag you have to describe an external JavaScript file cjajax.js on your page.

For example:
 


<script language="JavaScript" src="cjajax.js"></script>

<%@ taglib uri="taglib.tld" prefix="as" %>

Master list
<as:ajaxselect slaveId="id1" url="/action.do" size="1">
   <as:option value="1">Java</as:option>
   <as:option value="2">C#</as:option>
</as:ajaxselect>
...
Slave list
<select id="id1">

</select>

And now user's selection in the master list will perform the following request: /action.do?master=1 or /action.do?master=2. Here /action.do is an URL provided as an atrribute, master is a default parameter name for the selected value.

Tag assumes that your server side returns XML with data for the slave control. E.g.:
 


<?xml version="1.0" encoding="ISO-8859-1" ?>
<ajaxselect>
<option value="1">Jdeveloper</option>
<option value="2">JBuilder</option>
etc.
</ajaxselect>

Tag will parse the response and fill your slave select control identified by the attribute slaveId. Note: if you are generating XML in JSP file make sure there are no empty lines or whitespace before the <?xml ... ?> line.

You may obtain master's options through some array (collection, iterator etc.) and use this object for building your control:
 


<%
   java.util.Vector v=new java.util.Vector();
   v.addElement("Java");
   ...
%>

<as:ajaxselect source="<%=v%>" url="/servlet/MVC" slaveId="id1"/>

In this example (our collection contains Strings) tag iterates over elements and creates the control. You can pass a collection of beans also and describe how to get the value and text for options. Attribute option specifies what getXXX method is called on each item in your source for getting options. Attribute value does the same for values. E.g. option="name" means that that getName() call is used for getting options etc.

As a slave select box you can use a standard HTML select, select taglib from Coldtags suite or even another ajax select.

Tags are:

ajaxselect

Body tag. Creates select control that fills another select box. Parameters are:

1) name name for element
2) size Optional parameter. Defines how many elements are visible. Default value is 1
3) multiple Optional parameter. Describes a boolean values that enables/disables multiple selection. Default value is false (disabled)
4) id Optional parameter. Defines a CSS/XHTML id
5) className Optional parameter. Defines a CSS class name
6) style Optional parameter. Defines a CSS style
7) source Optional parameter. Describes collection, iterator, enumeration or array with elements (options) for selection.
8) option Optional parameter. Describes a name for property used for getting options
9) value Optional parameter. Describes a name for property used for getting values
10) disabled Optional parameter. Enables/disables this control. Possible values are true or false. Default value is false (enabled).
11) slaveId Describes a CSS/DHTML id for the slave control
12) url Optional parameter. Describes an URL for Ajax request
13) urlFunction Optional parameter. Describes a JavaScript function that returns an URL
14) parameterName Optional parameter. Describes a name for the parameter with master's selection. Default value is master
15) beforeAction Optional parameter. Describes a name for your own JavaScript function that will be called at the beginning of request. By default is empty.
16) afterAction Optional parameter. Describes a name for your own JavaScript function that will be called at the end of request. By default is empty.
17) onChange Optional parameter. Describes your own JavaScript code to be called after the selection (post processing after Ajax call).
18) error Optional parameter. Describes a name for your own JavaScript function that will be called in case of errors. By default is empty.
19) order Optional parameter. Lets you sort options. Possible values are asc or desc.

option

Body tag. Describes an option for select control (as tag's body). Parameters are:

1) value Optional parameter. Describes a value for this option.
2) selected Optional parameter. Defines a current status for this option. Possible values are true or false. Default value is false (not selected).

selectedIndex

Body tag lets you set an index for selected element. Tag's body presents an index (starting from 1) for option. Option's state will be set to selected. Parameters are: none

selectedValue

Body tag lets you set a value for selected element. Tag's body presents a value for option. Option's state will be set to selected. Parameters are: none

for downloading:

Library: ajaxseltag.jar    Description: taglib.tld  JavaScript library: cjajax.js

© Coldbeans      Comments?

See also Coldtags suite - the largest collection of custom JSP tags.

     

Also in Coldtags: