Java Reference
In-Depth Information
In the previous example, we set the
labelOnTop
attribute of each drop
down component to
true
. This has the effect of having the label for the
component be rendered right above it.
Once we have placed the components in the page, we need to invoke the
refresh()
JavaScript function on the text field, displaying the price every time a user changes
the value of one of the drop-down components. In order to do this we need to set the
onChange
attribute of each drop-down component to invoke the
refresh()
function
on the text field.
In order to do this, we need to select the drop-down in the design window, then
go to the
Properties
window and click on the ellipsis (
...
) button next to the
onChange
property.
We then need to add the JavaScript call as the value for this property.
Notice from the screenshot that we first need to get a reference to the component
to be updated (a static field in this example). We do this by invoking
document.
getElementById()
, and passing the client side ID of the component.
In JSF, form components are
naming
components, which means that the
client side id of any of their child components consist of the value of the
form's
id
attribute, followed by a colon, followed by the value of the child
component's
id
attribute. For this reason the client side id of the static
text field is
form1:amountText
, which is composed of the form's
id
attribute and the component's
id
attribute.
Once we have a reference to the component to be updated, we invoke the
refresh()
JavaScript function on it, passing the client id of the component firing the event as
an attribute.
