JSF форма сообщения с AJAX - PullRequest
Новая
       3

JSF форма сообщения с AJAX

9 голосов
/ 24 июня 2011

Я хочу, чтобы следующая форма использовала AJAX. Таким образом, комментарии отображаются после нажатия кнопки и без перезагрузки страницы. Что нужно изменить, используя Java Server Faces 2.0?

Функциональность: эта форма предоставляет inputText для определения темы. После нажатия кнопки command выполняется поиск комментариев по этой теме. Комментарии отображаются в таблице данных, если таковые имеются. В противном случае отображается Пусто . 

<h:form id="myForm">
    <h:outputLabel value="Topic:" for="topic" />
    <h:inputText id="topic" value="#{commentManager.topic}" />
    <h:commandButton value="read" action="#{commentManager.findByTopic}" />
    <h:panelGroup rendered="#{empty commentManager.comments}">
        <h:outputText value="Empty" />
    </h:panelGroup>
    <h:dataTable
        id="comments"
        value="#{commentManager.comments}"
        var="comment"
        rendered="#{not empty commentManager.comments}"
    >
        <h:column>
            <h:outputText value="#{comment.content}"/>
        </h:column>
    </h:dataTable>
</h:form>

Ответы [ 2 ]

21 голосов
/ 24 июня 2011

Вы должны указать командной кнопке использовать вместо этого Ajax.Это так же просто, как вложение тега <f:ajax> внутри него.Вы должны указать ему отправить всю форму по execute="@form" и отобразить элемент с идентификатором comments по render="comments". 

<h:commandButton value="read" action="#{commentManager.findByTopic}">
    <f:ajax execute="@form" render="comments" />
</h:commandButton>

Не забудьте убедиться, что вы <h:head> вместо <head> в главном шаблоне, так что необходимые JavaScripts JSF будут автоматически включены. 

<h:head>
    ...
</h:head>

Кроме того, элемент с идентификатором comments должен быть уже отрисовывается на стороне клиента JSF, чтобы иметь возможность снова обновляться (перерисовываться) с помощью JavaScript / Ajax.Поэтому лучше всего поместить <h:dataTable> в <h:panelGroup> с этим идентификатором. 

<h:panelGroup id="comments">
    <h:dataTable rendered="#{not empty commentManager.comments}">
        ...
    </h:dataTable>
</h:panelGroup>

См. Также:

1 голос
/ 24 июня 2011

Вам нужно изменить свою кнопку: 

<h:commandButton value="read" action="#{commentManager.findByTopic}">
    <f:ajax render="comments" />
</h:commandButton>

Это означает, что при нажатии кнопки действие выполняется, а dataTable будет отображаться и обновляться.Это работает только в том случае, если базовый компонент по крайней мере имеет область видимости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...