成功调用ajax后数据表不更新答案

【问题标题】：Datatable does not update after successful ajax call成功调用ajax后数据表不更新
【发布时间】：2012-02-06 20:24:31
【问题描述】：

我有一个数据表。表的每一行都有一个名为 'Remove' 的commandButton，它应该从模型和视图中删除该行并就地执行更新。作为页脚，我还有另一个 commandButton，名为 '删除每一行'。

最后一个按钮有效。我点击它，每一行都从模型中删除（即包含元素的ArrayList 变为空）并且dataTable 和footer facet 在视图中重新呈现（或更新）。

另一方面，当我单击其中一行上的按钮以将其删除时，它会部分起作用。相应的元素会从模型中移除，但视图不会更新。 dataTable 中的那一行仍然存在，footer facet 没有改变。

我的users.xhtml 中有以下代码。

<f:metadata>
    <f:viewParam name="id" value="#{users.id}" />
    <f:event type="preRenderView" listener="#{users.init}" />
</f:metadata>

...

<h:form id="usersForm">
    <p:outputPanel>    
        <p:dataTable id="userTable" value="#{users.user.friendList}" var="friend">
            <p:column>
                <h:outputText value="#{friend.name}" />
            </p:column>
            <p:column>
                <p:commandButton action="#{users.user.removeFriend(friend)}"
                    ajax="true"
                    update="userTable somethingElse" process="@this"
                    onerror="errorDialog.show();"
                    icon="ui-icon-delete"
                    title="delete user">
                </p:commandButton>
            </p:column>

            <f:facet id="somethingElse" name="footer">  
                    aye: ${users.user.xxx}
            </f:facet>
        </p:dataTable>

    </p:outputPanel>

    <p:commandButton action="#{users.user.removeAllFriends()}" ajax="true"
                update="userTable somethingElse"
                process="@this"
                icon="ui-icon-close"
                value="delete all friends?">
    </p:commandButton>


</h:form>

那么，您认为这里的问题是什么？

我正在使用 JSF 2.0 和 Primefaces 3.0

【问题讨论】：

不要在一个问题中问多个问题。请每个问题一个问题:) 我已经编辑了另一个问题。此外，链接的上一个问题根本不相关。它可能是相同的代码，但问题绝对不一样。至于您当前的问题：您使用的是哪个 PF 版本？如果你改用update="@form" 会怎样？
抱歉说的不好，但非常感谢，再次：）关于多个问题，下次我会尽力做到最好的：）
我把它作为答案转发了:)
@BalusC - 我将我的第二个问题作为单独的问题重新发布:) stackoverflow.com/questions/8804020/…

标签： ajax jsf jsf-2 primefaces

【解决方案1】：

我在我们当前的 PF 3.0 页面之一中发现了这个问题。如果您改用update="@form"，它将起作用。我真的没有时间调查真正的原因，以便我可以将其报告给 PF 人员，因为此问题并未出现在所有页面中。即使在同一个表格中，不同的按钮也可以按预期工作。

试一试：

<p:commandButton update="@form" ... />

更新：仔细想想，可能与process="@this"的存在有关。

【讨论】：

我更喜欢你的回答，因为它更高效、更干净。我想知道这个修复是否也适用于在 Primefaces 2.2.1 上运行的应用程序？我将不得不对此进行测试，并找出何时有更多时间。
我在 PF 3.2 中有一个现有项目，这仍然是一个问题。有谁知道它是否已在以后的版本中修复？
@Catfish：这已在 PF 3.4 中得到确认和修复：stackoverflow.com/questions/12516397/…

【解决方案2】：

您可能正在使用 Primefaces 2.2.1，因为这似乎是由于 Primefaces dataTable 组件的一个常见错误。本质上，发生在 dataTable 元素内的 ajax 回发不会导致 dataTable 中元素的部分页面更新。

最简单的解决方法是从 dataTable 外部的按钮调用回发，其唯一目的只是部分页面更新 dataTable。这不是最有效的解决方案，因为它会导致两次回发，但它确实有效。

查看我之前对这个问题的回答Here

【讨论】：

我实际上使用的是 Primefaces 3.0。是不是也有这个bug？
我的印象是这个问题在 3.0 中已经修复，但是我使用 3.0 的时间还没有长到遇到这个问题。

【解决方案3】：

如果您想使用服务器 ID 来更新组件（如 userTable、somethingElse、...），这些组件需要与触发更新的组件位于同一命名容器中（例如您的按钮）。否则，您需要在更新属性中使用这样的表达式：update=":usersForm:userTable"。

主要问题是识别命名容器。外部按钮确实有效，因为它与 ID 为 userTable 的表位于相同的命名容器（表单）中。 facet 会更新，因为整个表都更新了，但由于 datatable 本身就是一个命名容器，所以应该不可以通过仅在外部按钮上使用 update="somethingElse" 来更新页脚。

我不确定，为什么内部按钮不起作用。我猜数据表中还有另一个命名容器。如果使用UIComponent 实现的findComponent 算法无法找到组件，PrimeFaces 会记录一个 INFO。 INFO: Cannot find component with identifier "userTable" in view.

【讨论】：

【解决方案4】：

我的数据表中有过滤器。所以在这里我用

解决了这个问题

oncomplete="PF('myWidgetVar').filter()" and update="@form"

【讨论】：

【解决方案5】：

这是jsf 2.0中刷新的解决方案

<p:dataTable  id="empl1" var="emp" value="#{dtEmployeeView.employee}" selectionMode="multiple"  rowKey="#{emp.id}"
                              paginator="true" rows="5" tableStyleClass="ui-table-columntoggle">
    <p:column width="20" headerText="Id"  priority="1">
        <h:link value="#{emp.id}" />
    </p:column>
    <p:column headerText="Employee Name" priority="2">
        <h:outputText value="#{emp.pname}" />
    </p:column>

</p:dataTable>
<p:commandButton update="form1:empl1" ajax="true" value="Submit" action="#{empService.addEmployee(employee)}" >
    <f:event type="preRenderView" listener="#{dtEmployeeView.init()}"/>
</p:commandButton>

【讨论】：

【解决方案6】：

我使用的是update="@form"，但它并没有完全起作用：例如，它没有更新 dataTable 中的行数。我已经在更新表单的按钮上设置了这个：

process="@this" oncomplete="updateRC();"

然后就在下面：

<p:remoteCommand name="updateRC" process="@this" update="@form" />

我为解决行更新问题所做的是将 styleClass 添加到 dataTable，例如“myTable”，然后在上面的 remoteCommand 中为该类添加一个 jQuery 选择器，例如：

<p:remoteCommand name="updateRC" process="@this" update="@form @(.myTable)" />

【讨论】：