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.

Solution

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.

Comments

[Joshua Vicentini]

Thansk for the quick reply! So...i did see the rendered html, and the id of the dataTableHolder is formPesquisa:panelTableHolder. But even if i put like this, it doesn't work. Do you think it might have something to do with the fact that at first the panelDataTable is not rendered?

[Matt Handy]

Did you try update="@form"? Furthermore you need h:head instead of head in order to include the js libs for ajax.