Группировка компонентов

В предыдущих разделах описано, как связать отдельный компонент пользовательского интерфейса с функциональностью Ajax. Вы также можете связать Ajax с более чем одним компонентом одновременно, сгруппировав их на странице. В следующем примере показано, как можно сгруппировать несколько компонентов с помощью тега f:ajax:

<f:ajax>
    <h:form>
        <h:inputText id="input1" value="#{user.name}"/>
        <h:commandButton id="Submit"/>
    </h:form>
</f:ajax>

В этом примере ни один из компонентов ещё не связан с какими-либо атрибутами Ajax: event или render. Следовательно, в случае ввода пользователем никаких действий не будет. Вы можете связать вышеуказанные компоненты с атрибутами event или render следующим образом:

<f:ajax event="click" render="@all">
    <h:form>
        <h:inputText id="input1" value="#{user.name}"/>
        <h:commandButton id="Submit"/>
    </h:form>
</f:ajax>

В обновлённом примере, когда пользователь кликает любой компонент, обновлённые результаты будут отображаться для всех компонентов. Вы можете дополнительно отрегулировать действие Ajax, добавив определённые события для каждого из компонентов, и в этом случае функциональность Ajax станет накопительной. Рассмотрим следующий пример:

<f:ajax event="click" render="@all">
    ...
    <h:commandButton id="Submit">
        <f:ajax event="mouseover"/>
    </h:commandButton>
    ...
</f:ajax>

Теперь компонент кнопки будет запускать действие Ajax при событии mouseover, а также при клике мыши.