PrimeFaces dataTable is not updated after async partial submit request with Tag Update?

Question

I'm trying to update a dataTable after deleting an element from the dataTable, but it is not working properly. I have to refresh the page in order to have the dataTable updated or after many clicks on delete button, the table is rendered again without having to manually refresh the whole page.

Example of record to be deleted! enter image description here

If I click on delete, it is indeed deleted, however, dataTable is not re-render until I refresh the page.

Recorded deleted after I refresh the whole page or click delete button many times enter image description here

According to the primefaces documentation tag update should update partially the page.

https://www.primefaces.org/docs/vdl/3.5/primefaces-p/menuitem.html

[![enter image description here][3]][3]

This is my code, everything seems to be correct but, probably I'm missing something.

 <h:form id="form">
        <p:dataTable id="studentsDataTable"
                     value="#{studentsController.students}"
                     var="student"
                     rowKey="#{student.username}"
                     selection="#{studentsController.studentSelected}"
                     selectionMode="single">

            <!--Header-->
            <f:facet name="header">
                Spanish Academy : Students' List
                <p:button value="Add Student" outcome="new_student" />
            </f:facet>

            <p:column headerText="Username">
                <h:outputText value="#{student.username}" />
            </p:column>
            <p:column headerText="Firstname">
                <h:outputText value="#{student.firstname}" />
            </p:column>
            <p:column headerText="Lastname">
                <h:outputText value="#{student.lastname}" />
            </p:column>
            <p:column headerText="Edit" style="width:50px">

            </p:column>
            <!--Footer-->
            <f:facet name="footer">
                <p:commandButton value="Delete" process="@form" update="form:studentsDataTable"  actionListener="#{studentsController.deleteStudent}" icon="ui-icon-close"/>
                <p:spacer height="5px;"/>
            </f:facet>
        </p:dataTable>
    </h:form>

Any idea guys?

Thanks in advance.

have you already tried update="@form" in your menuitem instead of 'students'? — JavaMan, Jun 25 '18 at 16:10
Start reading https://stackoverflow.com/questions/7415230/uiform-with-prependid-false-breaks-fajax-render and did you run your application in jsf development mode to see if there are any errors? And tried without the celleditors (making it a [mcve] wpuld even be better btw) and tried a plain jsf (non-primefaces datatable to see if that makes a difference) — Kukeltje, Jun 25 '18 at 16:33
@ThomasSallaberger thanks for taking the time to answer, I have not tried update="@form" yet, as soon as I do it, I'll let you know, thanks again. — webtechnelson, Jun 25 '18 at 18:52
@Kukeltje thanks for your advices, I will follow them to find the solution, regards! — webtechnelson, Jun 25 '18 at 18:53
@ThomasSallaberger I tried with '@form' but nothing, I have refactored the form, however, I haven found the problem. Indeed, I discovered that after clicking many times the button delete, the table is rendered again, I do not know why. I have even follow a showcase example from prime faces https://www.primefaces.org/showcase/ui/ajax/process.xhtml — webtechnelson, Jun 26 '18 at 21:09
@Kukeltje I followed your advices, no luck until know, thanks anyway. — webtechnelson, Jun 26 '18 at 21:10
Did you try running your application in development mode? `update="form:studentsDataTable"` is not right. It misses a colon in front of form. — Kukeltje, Jun 27 '18 at 08:30
@Kukeltje thanks for your time, finally after looking for several solutions, I found out about PrimeFaces collector, it's simpler to build the dataTable and the logic for CRUD operations is really fast. best regards! — webtechnelson, Jul 04 '18 at 14:24

webtechnelson · Accepted Answer · 2018-07-04T14:39:03.097

0

Finally after looking for many ways to solve the problem following several sources and advice from well intended people, I solve it, using Prime Faces Collector.

Collector showcase for DataTable

If you are using PrimeFaces and want to build fast a form with tables and Data, I recommend you to use the collector component, you can remove and add easily elements from a list. An in the backing Bean you can set the logic easily and in a short timefor the Updating any record according to our needs.

I hope it can help somebody that have had my problem.

Git Repo JavaEE Application with JSF and PrimeFaces

edited Jul 04 '18 at 14:39

answered Jul 04 '18 at 14:22

webtechnelson

330
1
7
13

Cool. Need to look into this. Your answer might need some additional clarification so others can understand its usage better – Kukeltje Jul 04 '18 at 15:27

PrimeFaces dataTable is not updated after async partial submit request with Tag Update?

1 Answers1