JSF 2 + Primefaces - Update Not Working

Question

I'lve already searched, but even implementing the solutions I've found, I was not able to get this working. I select a row in a datatable and click on delete button to delete the selected object, but the object gets deleted but the datatable is not updated. Here's my code:

<h:form id="formPesquisa">  
            ...
            <h:panelGroup id="panelToRender" layout="block">
                <h:panelGroup id="panelDataTable" rendered="#{not empty bean.dataList}" layout="block">
                    <div id="dataTableRegion">
                        <p:panel id="panelBtnsUp" styleClass="cleanPanel">
                            <ui:include src="/templates/btnDataList.xhtml" />
                        </p:panel>
                        <h:panelGroup id="panelTableHolder" layout="block">
                            <p:dataTable id="dataTableBusca" value="#{bean.dataList}" var="entidade" 
                                rendered="#{not empty bean.dataList}" paginator="true" style="width:100%;"
                                selection="#{bean.entidadesSelecionadas}" onRowSelectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca"
                                onRowUnselectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca" rowUnselectListener="#{bean.rowUnselectListener}" selectionMode="multiple">
                                <p:column>
                                    <p:graphicImage url="/icons/checkbox_no.png" rendered="#{!bean.containsSelection(entidade)}" />
                                    <p:graphicImage url="/icons/checkbox_yes.png" rendered="#{bean.containsSelection(entidade)}" />
                                </p:column>
                                <ui:insert name="colunasPesquisa" />
                            </p:dataTable>
                        </h:panelGroup>
                        <p:panel id="panelBtnsDown" styleClass="cleanPanel">
                            <ui:include src="/templates/btnDataList.xhtml" />
                        </p:panel>
                    </div>
                </h:panelGroup>
            </h:panelGroup>
            ....
</h:form>

And the Delete Button is in the included file:

<div style="margin:5px 0;">
    <p:commandButton value="#{msg['commons.excluir']}" image="delete" disabled="#{bean.disableDelete()}" action="#{bean.delete}" update="panelDataTable" />
    <p:commandButton value="#{msg['commons.editar']}" image="edit" disabled="#{bean.disableEdit()}" action="#{bean.prepareEdit}" ajax="false" />
</div>

I already tried:

update="dataTableBusca"
update="panelTableHolder"
update="formPesquisa:dataTableBusca"
update="formPesquisa:panelTableHolder"

What am I doing wrong???

Thanks for any help.

Answer 1

The first two approaches will only work if your button and the updated elements are siblings.

For the third and the fourth approach you have to traverse all containing elements in order to get the right id. You panelTableHolder is inside two other h:panelGroup (panelToRender, panelDataTable) and a div (dataTableRegion).

Furthermore to make sure that you start from highest level, prepend a : before the form id.

Try this:

update=":formPesquisa:panelToRender:panelDataTable:dataTableRegion:panelTableHolder"

You could check in the rendered html if this is the correct path for your panelTableHolder.