使用AJAX的JSF表单发布

小编典典

使用AJAX的JSF表单发布

ajax

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

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

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

阅读 178

2020-07-26

共1个答案

小编典典

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

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

不要忘记确保在主模板中使用a <h:head>而不是a <head>，以便必需的JSF ajax JavaScripts将自动包括在内。

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

同样，具有ID的元素comments必须已经由JSF呈现给客户端，以便能够再次被JavaScript /
Ajax更新（重新呈现）。所以，最好是把<h:dataTable>一个<h:panelGroup>与该ID。

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

2020-07-26