JSF f:ajax cannot locate component on context [duplicate]

This question already has answers here: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar" (6 answers) Closed 6 years ago.

I'm trying update one dataTable from a graphicImage inside the dataTable. I tried a lot of combination of f:ajax render value but without success, now I'm using p:component function of PrimeFaces, but I get the same error before. I receive this error in browser:

f:ajax contains an unknown id 'j_idt690:painelTabelaAPDespesa' - cannot locate it in the context of the component j_idt735

the code I use to refresh:

<f:ajax event="click" render="#{p:component('painelTabelaAPDespesa')}"
                    listener="#{itensAPDespesa.removerItem(item)}" />

how you can see this f:ajax is inside a graphicImage that's inside a data table.

<h:panelGroup id="painelTabelaAPDespesa">
        <p:dataTable id="tabelaAPDespesa" value="#{itensAPDespesa.itens}"
            var="item">
            <p:column>
                #{itensAPDespesa.itens.indexOf(item)+1}
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Número" />
                </f:facet>
                <hrgi:editableText style="width:33%"
                    value="#{item.numeroDocumento}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Vencimento" />
                </f:facet>
                <hrgi:editableDate style="width:33%" value="#{item.dataVencimento}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Valor" />
                </f:facet>
                <hrgi:editableCurrency style="width:33%" value="#{item.valor}">
                    <f:ajax render="@form" event="blur"
                        listener="#{itensAPDespesa.adicionarItem(item)}"
                        onevent="mudarFocoParaCampoInexistente(this.id)" />
                </hrgi:editableCurrency>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Remover" />
                </f:facet>
                <h:graphicImage library="img" name="default_trash.png"
                    style="cursor:pointer;">
                    <f:ajax event="click" render="#{p:component('painelTabelaAPDespesa')}"
                        listener="#{itensAPDespesa.removerItem(item)}" />
                </h:graphicImage>
            </p:column>
        </p:dataTable>
        <h:outputLabel
            value="Total: #{modeloPopupRegistroDespesa.valorTotal}">
            <f:convertNumber type="currency" currencyCode="BRL"
                开发者_开发知识库currencySymbol="R$" maxFractionDigits="2" minFractionDigits="2" />
        </h:outputLabel>
    </h:panelGroup>

Probably this is caused because it don't know it is inside the component I want render, so how can I refresh this component (in this case the parent of dataTable)??

---

You could bind the component to the view and reference its UIComponent#getClientId() in the render instead:

<h:panelGroup id="painelTabelaAPDespesa" binding="#{painel}">
    <p:dataTable id="tabelaAPDespesa" value="#{itensAPDespesa.itens}" var="item">
        ...
        <f:ajax render=":#{painel.clientId}" ... />
        ...
    </p:dataTable>
</h:panelGroup>

---

The PrimeFaces <p:ajax> component has a bit more smart context-independent component locating algorithm. You could try using it instead.

<h:panelGroup id="painelTabelaAPDespesa">
    <p:dataTable id="tabelaAPDespesa" value="#{itensAPDespesa.itens}" var="item">
        ...
        <p:ajax update="painelTabelaAPDespesa" ... />
        ...
    </p:dataTable>
</h:panelGroup>