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

Question

我有一个数据表。表的每一行都有一个名为“Remove”的命令按钮，它应该从模型和视图中删除该行并就地执行更新。作为页脚，我有另一个名为“删除每一行”的 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

Answer 1

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

尝试一下：

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

---

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

Answer 2

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

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

请参阅我之前对此问题的回答此处

Answer 3

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

主要问题是识别命名容器。外部按钮确实有效，因为它与 ID 为 userTable 的表位于同一命名容器（表单）中。面会更新，因为整个表都会更新，但由于数据表本身就是一个命名容器，因此应该不能仅使用 update="somethingElse" 在外部按钮上。

我不确定为什么内部按钮不起作用。我猜数据表中还有另一个命名容器。如果使用 findComponent UIComponent 实现。 信息：在视图中找不到标识符为“userTable”的组件。

Answer 4

我的数据表中有过滤器。所以在这里我解决了这个问题

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

Answer 5

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

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

然后就在下面：

---

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

Answer 6

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