Ajax combo box taglib ver. 1.2

    Custom JSP taglib for UI development. This taglib is similar to our Custom combo box and lets you create a customized combo box. But here the list of options will be requested via Ajax call from your server side application. For example:
 


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

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

<a:AjaxComboBox name="list" height="18px" url="content.jsp"
background="#FFFFF0" listBackground="#FFFFF0"
mouseOverBackground="lightgreen" mouseOutBackground="#FFFFF0">
<a:option>Please, select</a:option>
<a:value>-1</a:value>
</a:AjaxComboBox>

Tag assumes that your server side code (described in the attribute url) will return XML data with the available options. E.g. your jsp file content.jsp can looks so:
 


<%response.setContentType("text/xml");%><?xml version="1.0" encoding="ISO-8859-1"?>
<ajaxcombo>
<option value="1" image="HomeOn.gif" width="12px" title="option one">Jdeveloper</option>
<option value="2">JBuilder</option>
</ajaxcombo>

and you will get some like this

Please, select

You can use any server-side application that returns a valid xml for the content (JSP, servlet or even PHP, ASP.NET etc.). In your XML file you can use any node name for the root (ajaxcombo in our example) and options (option in our example). Each option (node) in your XML response defines an option for your combo box. You can provide the following attributes for nodes in your XML response:

value - describes a value for this option
image - describes an image for this option
width - describes a width for your image
height - describes a height for your image
title - describes a title (tooltip) for this option

Note: if you are using JSP for the XML response make sure your XML code starts with the first line.

In order to use this tag you have to describe an external JavaScript file cjajax.js on your page. And of course you have to use this tag inside of HTML form (or form taglib from Coldtags suite).

Tags are:

AjaxComboBox

Body tag provides a combo box control with Ajax support. Parameters are:

1) name Describes a name for your control
2) id Optional parameter. Describes a DHTML id for the selected option.
3) url Optional parameter. Describes an URL for Ajax request
4) urlFunction Optional parameter. Describes a JavaScript function that returns an URL
5) error Optional parameter. Describes a name for your own JavaScript function that will be called in case of errors. By default is empty.
6) className Optional parameter. Describes a CSS class for the selected option
7) style Optional parameter. Describes your own CSS style.
8) width Optional parameter. Describes a width for the selected option. Default value is 150px
9) height Optional parameter. Describes a height for the selected option. Default value is 12px
10) borderWidth Optional parameter. Describes a width for the border around the selected option. Default value is 1px.
11) borderColor Optional parameter. Describes a color for the border around the selected option. Default value is black.
12) background Optional parameter. Describes a background for the selected option.
13) listBorderWidth Optional parameter. Describes a width for the border in your list. Default value is 1px.
14) listBorderColor Optional parameter. Describes a color for list's border. Default value is black.
15) listWidth Optional parameter. Describes a width for your list. Default value is 150px.
16) listHeight Optional parameter. Describes a height for your list. Default value is 80px.
17) listBackground Optional parameter. Describes a background for your list.
18) listClassName Optional parameter. Describes a CSS class for your list.
19) mouseOverBackground Optional parameter. Describes a background for items in your list.
20) mouseOutBackground Optional parameter. Describes a background for items in your list.
21) disabled Optional parameter. Possible values are true or false. If this value is true than combo box is in the read-only mode. Default value is false.
22) onChange Optional parameter. Describes your own JavaScript code for the selection event
23) img Optional parameter. Describes a path for your image. Default value is downButton.jpg.

option

Body tag lets you define a default option. Parameters are: none

value

Body tag lets you define a default value. Parameters are: none

for downloading:

Library: ajaxcombotag.jar    Description: taglib.tld  JavaScript library: cjajax.js
Default image: downButton.jpg

© Coldbeans      Comments?

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

Also in Coldtags: