如何使用ajax更新JSF数据表

Question

我通过按下命令按钮使用数据表动态添加输入文本，但每次添加行时页面都会刷新如何在数据表中添加行而不使用ajax刷新页面。这是代码

<h:form>

    <h:dataTable id="table" value="#{dataTableBean.cities}" var="city">
        <h:column>
            <f:facet name="header">
                <h:outputText value="City name" />
            </f:facet>
            <h:inputText value="#{city}" />
        </h:column>
    </h:dataTable>

    <h:commandButton value="Add one more city" id="ajax" update="table"
        actionListener="#{dataTableBean.enlargeList}" />
    <h:commandButton value="Submit" actionListener="#{dataTableBean.processList}" />
</h:form>

Answer 1

只要它应该是一个有效的练习，发布任何接近答案的内容都会损害OP对该主题的理解。

所以，我会给出一些提示，以便OP可以自己解决问题。

1. 你混淆了Primefaces UI组件，其标签以<p:...>和标准JSF UI组件<h:...>开头。关于你的例子，有<h:commandButton>和<p:commandButton>。至于Primefaces组件旨在为用户提供更方便的界面，Primefaces中的一些附加属性与标准命令按钮相对应。发现它们并注意AJAX规范。仔细看看ajax和update属性。
2. <f:ajax>标签为UIComponents实现ClientBehaviorHolder接口启用ajax行为。类似地，<p:ajax>标签与一些增强功能基本相同，并由Primefaces组件使用。例如，可以在<h:commandButton> / <p:commandButton>中对这些标记进行格式化，并指定该组件的ajax行为。注意execute的render / <f:ajax>属性和/或process的update / <p:ajax>属性。这样，命令按钮不会触发标准表单提交，但会触发AJAX调用。
3. 请务必了解命令按钮的操作和动作侦听器之间的区别。后者旨在执行一些微小的调整（记录/访问调用者的属性/调整某些属性等），而前者用于执行业务操作（保存/删除/更新等）。优秀的开始是阅读Differences between action and actionListener。

最后，请确保不要混淆代码中的输入和输出组件。

最后，咨询良好的信息来源是一个非常好的主意。您可以从官方文档（Primefaces documentation，Oracle's tutorial on Java EE 6）开始，然后继续提供可靠的信息来源。我的个人喜好来自以下（辉煌）来源：BalusC tutorials on Java EE in general and JSF in particular，Marty Hall's tutorials on a wide spectrum of subjects within Java和Mkyong's tutorials, covering concrete problems within Java EE，以防你需要一个具体的例子。