PrimeFaces dataTable doesn''t render when exists binding attribute

Question

I'm creating a dataTable with two dataTable inside :).

But this time I'm having problem to render it when I try use binding attribute in a h:panelGroup that wraps first dataTable. I'm using binding to help refresh just the panelGroup, like BalusC told in this question. When I remove the binding attribute the dataTable renders normally, but of course nothing is rendered with f:ajax tags inside the dataTables.

Here is the xhtml:

<ui:component>
<h:panelGroup>
    <h:panelGroup layout="block;" id="#{id}"
        binding="#{painelTabelaContatos}" rendered="true">
        <p:dataTable id="tabela#{id}"
            value="#{modeloTabelaContatos.listaDeContatos}" var="contato"
            selectionMode="single"
            rowSelectListener="#{controladorTabelaContatos.processarSelecaoLinha}"
            rowUnselectListener="#{controladorTabelaContatos.processarDeselecaoLinha}"
            selection="#{modeloTabelaContatos.contatoSelecionado}">
            <p:column headerText="Contatos">
                <hrgi:editableText style="width:100%" value="#{contato.descricao}" />
            </p:column>
            <p:column headerText="Telefones">
                <h:dataTable value="#{contato.telefones}" var="telefone">
                    <h:column>
                        <h:inputText value="#{telefone}" />
                    </h:column>
                    <h:column>
                        <h:graphicImage library="img" name="default_trash.png"
                            style="cursor:pointer;">
                            <f:ajax event="click" render=":#{painelTabelaContatos.clientId}"
                                listener="#{controladorTabelaContatos.removerTelefone(contato, telefone)}" />
                        </h:graphicImage>
                    </h:column>
                </h:dataTable>
            </p:column>
            <p:column headerText="e-mails">
                <h:dataTable value="#{contato.emails}" var="email">
                    <h:column>
                        <h:inputText value="#{email}" />
                    </h:column>
                    <h:column>
                        <h:graphicImage library="img" name="default_trash.png"
                            style="cursor:pointer;">
                            <f:ajax event="click" render=":#{painelTabelaContatos.clientId}"
                                listener="#{controladorTabelaContatos.removerEmail(contato, email)}" />
                        </h:graphicImage>
                    </h:column>
                </h:dataTable>
            </p:column>
            <p:column>
                <h:graphicImage library="img" name="default_trash.png"
                    style="cursor:pointer;">
                    <f:ajax render=":#{painelTabelaContatos.clientId}" event="click"
                        listener="#{controladorTabelaContatos.removerContato(contato)}" />
                </h:graphicImage>
            </p:column>
        </p:dataTable>
    </h:panelGroup>
    <h:panelGroup layout="block">
        <p:commandButton value="ADICIONAR CONTATO" update="#{id}"
            immediate="true"
            action="#{controladorTabelaContatos.adicionarContato}" />
        <p:commandButton value="ADICIONAR TELEFONE" update="#{id}"
            immediate="true"
            action="#{controladorTabelaContatos.adicionarTelefone}" />
        <p:commandButton value="ADICIONAR E-MAIL" update="#{id}"
            immediate="true"
            action="#{controladorTabelaContatos.adicionarEmail}" />
    </h:panelGroup>
</h:panelGroup>
</ui:component>

I've already tried remove the h:dataTables that are inside p:dataTable, but without success. This component is just the content of a PrimeFaces tab, and this tab is inside a PrimeFaces dialog. Could someone explain me why is this happening??

You mentioned that it worked? The only difference is that you're now assigning the <h:panelGroup> a dynamic ID instead of a static ID. Perhaps the ID is coming from a source which doesn't exist anymore when you send the ajax request? — BalusC

brevleq brevleq · Accepted Answer · 2011-10-07T12:10:27

I've found the cause of error, after it was easy find a solution... The problem is caused because I call this component in two different pages:

popupCadastroPessoa.xhtml

<ui:include src="../tabs/abaEdicaoContatos.xhtml">
    <ui:param name="id" value="painelContatoPessoa" />
</ui:include>

and in popupCadastroFuncionario.xhtml

<ui:include src="../tabs/abaEdicaoContatos.xhtml">
    <ui:param name="id" value="painelContatoFuncionario" />
</ui:include>

cause I didn't really created the binding bean, JSF gets confused. So I've just created two UIPanel beans and passed it as parameter:

<ui:include src="../tabs/abaEdicaoContatos.xhtml">
    <ui:param name="id" value="painelContatoPessoa" />
    <ui:param name="painelTabelaContatos" value="#{bindingTabelaContatoPessoa}"/>
</ui:include>

Was my fault. Thanks for your attention and sorry for the inconvenience.

PrimeFaces dataTable doesn''t render when exists binding attribute

1 Answers