Question

我希望以下表单使用AJAX。因此，在单击命令按钮并且不重新加载页面后，将显示注释。使用Java Server Faces 2.0需要更改什么？

功能：此表单提供inputText来定义主题。按下commandButton后，将搜索有关此主题的注释。评论显示在dataTable中，如果有的话。否则会显示 Empty 。

<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>

Answer 1

您需要告诉命令按钮使用Ajax。就像在其中嵌套<f:ajax>标签一样简单。您需要指示它按execute="@form"提交整个表单，并按comments呈现ID为render="comments"的元素。

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

不要忘记确保在主模板中有<h:head>而不是<head>，以便自动包含必要的JSF ajax JavaScripts。

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

此外，具有ID comments的元素需要已经通过JSF呈现给客户端，以便能够再次由JavaScript / Ajax更新（重新呈现）。最好将<h:dataTable>放入带有该ID的<h:panelGroup>。

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

另见：

Answer 2

您需要修改按钮：

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

这意味着，当单击该按钮时，将执行该操作，并且将呈现和更新dataTable。这仅在辅助bean至少是视图范围时才有效。

使用AJAX的JSF表单帖子

2 个答案:

另见：