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

Datatable does not update after successful ajax call

提问by Murat Derya ?zen

I have a data table. Each row of the table has a commandButtoncalled 'Remove', which is supposed to remove that row from the model and the view and perform an update in-place. As a footer, I have another commandButtoncalled 'Remove every row'.

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

The last button works. I click on it, every row is removed from the model (i.e the ArrayListcontaining the elements becomes empty) and the dataTableand footer facetis re-rendered (or updated) in the view.

最后一个按钮有效。我点击它，每一行被从模型中移除（即ArrayList含有的元素为空），并且dataTable和footer facet是再渲染在视图（或更新）。

On the other hand, when I click a button on one of the rows, to remove it, it partially works. The corresponding element is removed from the model but the view is not updated. That row is still there in the dataTableand the footer facethasn't changed.

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

I have the following piece of code in my users.xhtml.

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

So, what do you think is the problem here?

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

I'm using JSF 2.0 and Primefaces 3.0

我使用的是 JSF 2.0 和 Primefaces 3.0

回答by BalusC

I recognize this problem form one of our current PF 3.0 pages. It will work if you use update="@form"instead. I haven't really had the time to investigate the real cause so that I can report it to the PF guys, because this problem does not manifest in all pages. Even in the same table, a different button works as intented.

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

Give it a try:

试一试：

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

---

---

Update: coming to think about it, it's maybe related to the presence of process="@this".

更新：仔细想想，这可能与process="@this".

回答by maple_shaft

You are probably using Primefaces 2.2.1 as this seems like it is due to a common bug with the Primefaces dataTable component. Essentially what occurs is that ajax postbacks occurring from within elements of a dataTable will not result in a partial page update of elements in the dataTable.

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

The simplest workaround is to invoke a postback from a button outside of the dataTable where its sole purpose is simply to partial page update the dataTable. This is not the most efficient solution as it results in two postbacks, however it does work.

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

See my previous answer to this problem Here

在此处查看我之前对此问题的回答

回答by truemmer

If you want to use server IDs for updating components (like userTable, somethingElse, ...), these components need to be in the same naming container as the component which triggers the update (your button for example). Otherwise you need to use an expression like this within the update attribute: update=":usersForm:userTable".

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

The main problem is to identify the naming containers. The outer button does work, because it is in the same naming container (the form) as the table with the ID userTable. The facet gets updated because the whole table gets updated, but since datatable is a naming container itself, it should notbe possible to update the footer by just using update="somethingElse"on the outer button.

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

I'm not sure, why the inner button does not work. I guess there is another naming container within the datatable. PrimeFaces does log an INFO, if the component could not be found using the findComponentalgorithm of the UIComponentimplementation. INFO: Cannot find component with identifier "userTable" in view.

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

回答by Kishore Kumar

This is the solution to refresh in jsf 2.0

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

回答by Jo?o Paulo Lemos Escola

I had filters in my datatable. So here I resolved the problem with

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

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

回答by Andrew

I was using update="@form"and it didn't completely work: it wasn't updating the number of rows in the dataTable, for instance. What I already had in place was this on the button that updated the form:

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

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

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

and then just below I had:

然后就在下面我有：

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

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

---

---

What I did to fix the rows update problem is add a styleClass to the dataTable, e.g. "myTable", and then add a jQuery selector to that class in the above remoteCommand, e.g.:

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

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

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