<f:ajax>
<h:form>
<h:inputText id="input1" value="#{user.name}"/>
<h:commandButton id="Submit"/>
</h:form>
</f:ajax>
Java Platform, Enterprise Edition (Java EE) 8 The Java EE Tutorial |
Previous | Next | Contents |
The previous sections describe how to associate a single UI component
with Ajax functionality. You can also associate Ajax with more than one
component at a time by grouping them together on a page. The following
example shows how a number of components can be grouped by using the
f:ajax
tag:
<f:ajax>
<h:form>
<h:inputText id="input1" value="#{user.name}"/>
<h:commandButton id="Submit"/>
</h:form>
</f:ajax>
In the example, neither component is associated with any Ajax event
or
render
attributes yet. Therefore, no action will take place in case of
user input. You can associate the above components with an event
and a
render
attribute as follows:
<f:ajax event="click" render="@all">
<h:form>
<h:inputText id="input1" value="#{user.name}"/>
<h:commandButton id="Submit"/>
</h:form>
</f:ajax>
In the updated example, when the user clicks either component, the updated results will be displayed for all components. You can further fine-tune the Ajax action by adding specific events to each of the components, in which case Ajax functionality becomes cumulative. Consider the following example:
<f:ajax event="click" render="@all">
...
<h:commandButton id="Submit">
<f:ajax event="mouseover"/>
</h:commandButton>
...
</f:ajax>
Now the button component will fire an Ajax action in case of a
mouseover
event as well as a mouse-click event.
Previous | Next | Contents |