Components are with the same id inside ui:repeat

Question

Unfortunately, primefaces accordionPanel doesn't works well in version 2.2.1 if you are trying to create tabs dynamically. This is my case, I need to create accordions if the user clicks an add icon, and remove if he clicks on x icon. No problem, I've created my own composite component, like you can see here:

<c:interface>
    <c:attribute name="titulo" default="" required="false" />
    <c:attribute name="renderizar" default="true" required="false" />
    <c:attribute name="width" required="false" default="300"/>
    <c:facet name="extra" required="false" />
</c:interface>

<c:implementation>
    <h:outputStylesheet library="css" name="hrgiAccordion.css" target="head" />
    <h:outputStylesheet library="css" name="clearfix.css" target="head" />
    <h:outputScript library="js" name="hrgiAccordion.js" target="head" />
    <h:panelGroup layout="block" rendered="#{cc.attrs.renderizar}"
    styleClass="hrgi-accordion clearfix" style="width: #{cc.attrs.width}px;">
        <div class="hrgi-cabecalho-accordion clearfix"
            onclick="abrirAccordion(this)">
            <h:outputLabel value="#{cc.attrs.titulo}" />
            <c:renderFacet name="extra" required="false"/>
        </div>
        <h:panelGroup layout="block" class="hrgi-conteudo-accordion clearfix">
            <c:insertChildren />
        </h:panelGroup>
    </h:panelGroup>
</c:implementation>

It works fine, but I have some specifics needs... The content of accordion tab is some select and a dynamic table with an inputField and an spinner (created by me again), you can see the user interface here:

When user insert values in spinners, the label "Total das parcelas" should update, but it just updates when the dialog only have one accordion tab! Looking at generated html code I've saw that the spinners in differents accordion tab are equals! Probably this is the reason I can't update values. Here is the code of this dialog:

<ui:composition template="../templates/popupSubmit.xhtml">
<ui:param name="titulo" value="#{vendaMsg['popup.forma_pagamento.titulo']}"/>
<ui:param name="popup" value="#{modeloPopupFormaPagamento}"/>
<ui:param name="controladorPopup" value="#{controladorPopupFormaPagamento}"/>
<ui:define name="cabecalho">
    <h:panelGroup id="cabecalhoValores" binding="#{cabecalhoValores}" layout="block">
        <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.total_prevenda']}" />
        <h:outputLabel value="#{preVendaBean.valorLiquido}">
            <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                             minFractionDigits="2" type="currency" currencyCode="BRL"/>
        </h:outputLabel>
        <hrgi:separador/>
        <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.total_parcelas']}" />
        <h:outputLabel value="#{controladorPopupFormaPagamento.calcularTotalParcelas()}">
            <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                             minFractionDigits="2" type="currency" currencyCode="BRL"/>
        </h:outputLabel>
    </h:panelGroup>
</ui:define>
<ui:define name="conteudo">
    <h:panelGroup layout="block" styleClass="clearfix hrgi-div-form">
        <h:panelGroup id="painelFormasDePagamento" binding="#{painelFormasDePagamento}" layout="block">
            <ui:repeat id="repeticao" var="formaPagamento" value="#{modeloPopupFormaPagamento.formasDePagamento}">
                <hrgi:accordion titulo="#{vendaMsg['popup.forma_pagamento.aba_acordeon.titulo']}" width="380">
                    <f:facet name="extra">
                        <p:commandLink action="#{controladorPopupFormaPagamento.removerForma(formaPagamento)}"                                           
                                       update=":#{painelFormasDePagamento.clientId}" global="false">
                            <h:graphicImage library="img" name="remover.png"/>
                        </p:commandLink>
                    </f:facet>
                    <h:panelGroup layout="block" class="clearfix">
                        <h:panelGroup id="painelSelecaoForma" layout="block">
                            <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.forma_pagamento']}"/>
                            <h:selectOneMenu value="#{formaPagamento.idFormaPagamento}"                                                                 valueChangeListener="#{controladorPopupFormaPagamento.processarMudancaFormaPagamento}">
                                <f:selectItems value="#{selectItemFormasPagamento.itens}"/>
                                <f:attribute value="#{formaPagamento}" name="formaPagamento"/>
                                <f:ajax event="change" render="painelSelecaoForma painelParcelasFormaPagamento" execute="painelSelecaoForma"/>
                            </h:selectOneMenu>
                            <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.plano_pagamento']}"                                       />
                            <h:selectOneMenu value="#{formaPagamento.idPlanoPagamento}"                                        valueChangeListener="#{controladorPopupFormaPagamento.processarMudancaPlanoPagamento}">
                                <f:selectItems value="#{controladorPopupFormaPagamento.recuperarCarregador(formaPagamento).itens}"/>
                                <f:attribute value="#{formaPagamento}" name="formaPagamento"/>
                                <f:ajax event="change" render="painelParcelasFormaPagamento"/>
                            </h:selectOneMenu>
                        </h:panelGroup>
                        <h:panelGroup id="painelParcelasFormaPagamento" layout="block">
                            <p:dataTable id="tabela" value="#{formaPagamento.parcelas}" var="parcela"
                                         emptyMessage="#{msgGerais['gerais.sem_dados']}"
                                         scrollable="#{formaPagamento.parcelas.size()>2}"
                                         height="76">
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.numero_parcela']}">
                                    <h:outputText value="#{formaPagamento.parcelas.indexOf(parcela)+1}"/>
                                </p:column>
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.vencimento_parcela']}">
                                    <hrgi:editableDate value="#{parcela.dataVencimento}" editable="true"/>
                                </p:column>
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.valor_parcela']}">
                                    <hrgi:spinner id="valor"
                                            dinheiro="true" fator="0.01" local="pt-BR"
                                            value="#{parcela.valor}">
                                        <f:ajax event="change" execute="@form"
                                                render=":#{cabecalhoValores.clientId}"/>
                                        <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                                                         minFractionDigits="2" type="currency" currencyCode="BRL"
                                                         for="input"/>
                                    </hrgi:spinner>
                                </p:column>
                            </p:dataTable>
                        </h:panelGroup>
                    </h:panelGroup>
                </hrgi:accordion>
            </ui:repeat>
        </h:panelGroup>
        <p:commandLink immediate="true" action="#{controladorPopupFormaPagamento.adicionarForma}"
                       update="painelFormasDePagamento" global="false">
            <h:graphicImage library="img" name="adicionar_48.png"/>
        </p:commandLink>
    </h:panelGroup>
</ui:define>
</ui:composition>

In this image you can see what is happening, component's id inside primefaces datatable aren't appended with ui:repeat index:

How can I solve this problem???

Answer 1

This is a Mojarra bug which manifests when you nest an UIData component inside an UIRepeat. I've ever reported it as issue 1830. It's not fixed so far and it works as expected in MyFaces. The UIRepeat is broken in many ways in Mojarra, but works perfect in MyFaces.

If you want/need to stick to Mojarra and thus can't replace it by MyFaces, consider replacing the UIRepeat by a fullworthy UIData based component. Tomahawk's <t:dataList> for example does not generate any additional markup and is a good <ui:repeat> replacement. Or you could use PrimeFaces' <p:dataList> and hide the list bullets with some CSS list-style-type: none.

Update: the reported issue is fixed in Mojarra 2.1.12 and 2.2.0-m06. So if you can, just upgrade to at least that version.