成功调用ajax后，Datatable不会更新

Question

我有一个数据表。 该表的每一行都有一个名为“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

Answer 1

我从当前的PF 3.0页面中认识到这个问题。 如果您使用update="@form" ，它将起作用。 我没有真正的时间来调查真正的原因，以便我可以向PF人员报告，因为这个问题并没有在所有页面中出现。 即使在同一张桌子中，一个不同的按钮也可以用作。

试试看：

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

---

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

Answer 2

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

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

见我以前回答这个问题， 在这里

Answer 3

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

主要问题是识别命名容器。 外部按钮确实有效，因为它与具有ID userTable的表位于相同的命名容器（表单）中。 小面被更新，因为整个表得到更新，但由于数据表是命名容器本身，它应该是不可能通过只使用更新页脚update="somethingElse"的外键。

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

Answer 4

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

Answer 5

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

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

Answer 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)" />