Summary

Tag name: <t:jsValueChangeListener>
UIComponent class: org.apache.myfaces.custom.jslistener.JsValueChangeListener
Tag class: org.apache.myfaces.custom.jslistener.JsValueChangeListenerTag
Component type: org.apache.myfaces.JsValueChangeListener
Component family: javax.faces.Output
Renderer type: org.apache.myfaces.JsValueChangeListener
Renderer class: org.apache.myfaces.custom.jslistener.JsValueChangeListenerRenderer

Value change listener on client side.

This component replicates the 'Value Change Listener' functionality on the client side. It can be used when the user would like a change in the value of one control to trigger off changes in the states of other controls. One or more Javascript Listeners can be nested within the source control (a control belonging to the 'javax.faces.Input' family). When the value of the source control is modified, the listeners are triggered and the states of the target controls modified.

Unless otherwise specified, all attributes accept static values or EL expressions.

Usage

<t:jsValueChangeListener for="id"
                            property="property"
                            expressionValue="{true|false}" 
                            bodyTagEvent="eventName" />

Examples

Some examples will throw more light on the usage of this component.

Example 1

<h:inputText id="text1">
                    <t:jsValueChangeListener for="text2" property="value" 
                                                expressionValue="$srcElem.value" />
                </h:inputText>
                <h:inputText id="text2"/>

When the value of text1 changes, the 'onchange' event is triggered. The javascript expression specified by 'expressionValue' is evaluated, and the result is assigned to the specified property (in this case, 'value') of the target control.

Example 2

<h:selectOneMenu id="selone_menu_colors" value="red" styleClass="selectOneMenu">
           <f:selectItems value="#{carconf.colors}" />
           <t:jsValueChangeListener for="selone_menu_subcolors" 
             expressionValue="($srcElem.options[$srcElem.selectedIndex].value=='black')?
             $destElem.style.display='inline':$destElem.style.display='none';"/>
       </h:selectOneMenu>
       <h:inputText id="selone_menu_subcolors"/>

The evaluation of the expression causes the text box to be hidden when the appropriate value is selected.

Instructions

see examples/jslistener.jsp for an example!

Attributes