13.9 Grouping of Components

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.