Datatable не обновляется после успешного вызова ajax

Question

У меня есть таблица данных. В каждой строке таблицы есть commandButton с именем '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

Если вы хотите использовать идентификаторы сервера для обновления компонентов (например, userTable, somethingElse, ...), эти компоненты должны находиться в том же контейнере именования, что и компонент, запускающий обновление (например, ваша кнопка). ). В противном случае вам нужно использовать подобное выражение в атрибуте обновления: update=":usersForm:userTable".

Основная проблема заключается в идентификации именующих контейнеров. Внешняя кнопка работает, потому что она находится в том же контейнере имен (форма), что и таблица с идентификатором userTable. Фасет обновляется, потому что обновляется вся таблица, но поскольку datatable сам по себе является контейнером именования, не должно иметь возможность обновить нижний колонтитул, просто используя update="somethingElse" на внешней кнопке.

Я не уверен, почему не работает внутренняя кнопка. Я предполагаю, что есть еще один контейнер именования внутри таблицы данных. PrimeFaces регистрирует INFO, если компонент не может быть найден с использованием алгоритма findComponent реализации UIComponent . INFO: Cannot find component with identifier "userTable" in view.

Answer 3

Вероятно, вы используете Primefaces 2.2.1, так как похоже, что это связано с общей ошибкой в ​​компоненте datafaceable Primefaces.По сути, происходит следующее: обратные передачи ajax, происходящие из элементов dataTable, не приводят к частичному обновлению страницы элементов в dataTable.

Самый простой обходной путь - вызвать обратную передачу от кнопки вне dataTable, гдеего единственная цель - просто частичное обновление страницы dataTable.Это не самое эффективное решение, поскольку оно приводит к двум обратным передачам, однако оно работает.

См. Мой предыдущий ответ на эту проблему Здесь

Answer 4

Я использовал update="@form", и он не работал полностью: например, он не обновлял количество строк в dataTable. То, что у меня уже было, было на кнопке, обновляющей форму:

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

а потом чуть ниже у меня было:

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

---

Что я сделал, чтобы решить проблему с обновлением строк, так это добавление styleClass в dataTable, например, «myTable», а затем добавьте селектор jQuery к этому классу в вышеупомянутом remoteCommand, например ::

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

Answer 5

У меня были фильтры в моей базе данных. Итак, здесь я решил проблему с

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

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>