Primefaces 8.0 JSF not updating table

Question

When I click addTagButton, everything works well. It updates all three components: tags, tagId and addTagButton.

    <p:commandButton id="addTagButton" icon="ui-icon-plus"
            action="#{searchBean.addTag}" 
            update="tags, tagId, addTagButton"
            disabled="#{searchBean.tagChoices.size() == 0}">
    </p:commandButton>
    

Here's the table component:

    <h:dataTable id="tags" var="tag" value="#{searchBean.tags}">
        <h:column>
            <div style="text-align:right;">
                <h:outputLabel value="#{tag.typeName}:"/>
            </div>
        </h:column>
        <h:column>
            <p:inputText id="tag" size="25" value="#{tag.typeValue}"
                disabled="#{searchBean.searchForParent}"/>
        </h:column>
        <h:column>
            <p:commandButton id="delTagButton" icon="pi pi-trash" 
                action="#{searchBean.deleteTag}"
                update=":contentForm:tagId, :contentForm:addTagButton, tags">
                <f:setPropertyActionListener 
                    target="#{searchBean.tagId}" 
                    value="#{tag.typeName}" />
            </p:commandButton>
        </h:column>
    </h:dataTable>

When i click on delTagButton that is on each row in tags table, action works fine, :contentForm:tagId and :contentForm:addTagButton update fine. But tags table which is where clicked command button exist, does not update.

When a row is deleted, change must reflect in the tags table which does not work.

Now, If I change h:dataTable to p:dataTable or any other primefaces component, it works. I am trying to make it work with h:dataTable.

Primefaces 8.0, JSF 2.5

Answer 1

Look on this simple example:

<h:form id="form">
    <h:panelGroup id="wrapper" layout="block">
        <h:dataTable id="table" border="1" value="#{testBean.list}" var="person">
            <h:column>#{person.name}</h:column>
            <h:column>#{person.surname}</h:column>
            <h:column>
                <p:commandButton id="delTagButton" icon="pi pi-trash" 
                    action="#{testBean.remove(person)}" update="table">
                </p:commandButton>
            </h:column>
        </h:dataTable>
    </h:panelGroup>
</h:form>

To really find out what is being updated look in browser console.

If you're trying to update="table" nothing happens (like in your code). If you try to update a parent of the table (which is often a case), you will get an error an error:

SEVERE: Error Rendering View[/example.xhtml]
org.primefaces.expression.ComponentNotFoundException: Cannot find component for expression "wrapper" referenced from "form:table:0:delTagButton".
at org.primefaces.expression.SearchExpressionFacade.cannotFindComponent(SearchExpressionFacade.java:677)

So we could try with "older" parent and realize that update="@form" works! OK, so we want to help to find id="table\wrapper" component. Let try clientId update="form:table". Like with update="table" nothing happens. And no error from PF (so the element can be found). This could mean that h:dataTable cannot be properly re-rendered from inside itself (but I don't want to throw stones:-)). This is often a case with e.g. popups in JSF 3rd party component libraries.

In this particular example I'd say, you have to update form:wrapper (adding form: works) or just @form to get it work. With your code it would be the same. Try to update some table parent or the whole form.

---

All of above is tested in JSF 2.2, with last RF, an old PF and OmniFaces. But I think the same would be the case with newer versions.

BTW. I didn't know there is JSF 2.5 :-)