使用 AJAX 的 JSF 表单发布答案

【问题标题】：JSF form post with AJAX使用 AJAX 的 JSF 表单发布
【发布时间】：2011-09-22 06:08:09
【问题描述】：

我希望以下表单使用 AJAX。因此，在单击命令按钮后会显示 cmets，而无需重新加载页面。使用 Java Server Faces 2.0 需要更改哪些内容？

功能：这个表单提供了一个 inputText 来定义一个主题。按下 commandButton 后，将搜索有关此主题的 cmets。注释显示在数据表中（如果有）。否则显示空。

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

【问题讨论】：

标签： ajax jsf-2

【解决方案1】：

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

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

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

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

另见：

【讨论】：

添加的 panelGroup 完成了这项工作。我还需要将execute="topic" 添加到f:ajax，因为#{commentManager.findByTopic} 需要#{commentManager.topic}。

【解决方案2】：

你需要修改你的按钮：

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

这意味着，当点击按钮时，动作被执行，dataTable 将被渲染和更新。这仅在支持 bean 至少是视图范围的情况下才有效。

【讨论】：

请注意，这仅适用于数据表已经由 JSF 呈现给客户端的情况。否则 JavaScript 在 HTML DOM 树中找不到需要更新的元素。在这种特殊情况下，数据表具有rendered 属性，该属性似乎在第一次请求表单时评估false :)