Komponenty mają ten sam identyfikator w środku: powtórzenie

Question

Niestety, primiones akordeonPanel nie działa dobrze w wersji 2.2.1, jeśli próbujesz dynamicznie tworzyć karty. To jest mój przypadek, muszę utworzyć akordeony, jeśli użytkownik kliknie ikonę dodawania i usunąć, jeśli kliknie na ikonę x. Nie ma problemu, mam stworzył własną składnik kompozytu, jak można zobaczyć tutaj:

<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> 

To działa dobrze, ale mam pewne specyfika wymaga ... Zawartość zakładki akordeon jest jakiś wybrać i dynamiczny stół z inputField i pokrętła (tworzone przez mnie ponownie), można zobaczyć interfejs użytkownika tutaj:

Kiedy wartości wkładka użytkownika w błystki, etykieta „Wszystkich das Parcelas” należy zaktualizować, ale to po prostu aktualizacje, gdy okno dialogowe ma tylko jedną kartę akordeonu! Patrząc na wygenerowany kod html Zobaczyłem, że spinners in differents tabion tab są równe! Prawdopodobnie jest to powód, dla którego nie mogę zaktualizować wartości. Oto kod tego dialogu:

<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> 

W tym obrazie można zobaczyć, co się dzieje, id komponentu wewnątrz primefaces DataTable nie są dołączane z ui: repeat index:

Jak czy mogę rozwiązać ten problem ???

Answer 1

To jest błąd Mojarry, który manifestuje się po zagnieżdżeniu komponentu UIData wewnątrz UIRepeat. Zgłaszałem to jako issue 1830. Nie zostało to naprawione do tej pory i działa zgodnie z oczekiwaniami w MyFaces. UIRepeat jest rozbity na wiele sposobów w Mojarra, ale działa idealnie w MyFaces.

Jeśli chcesz/musisz przykleić do Mojarra, a tym samym nie zastąpić go przez MyFaces, rozważ zastąpienie UIRepeat przez pełny składnik oparty na UIData. Tomahawk's<t:dataList> na przykład nie generuje żadnych dodatkowych znaczników i jest dobrym zamiennikiem <ui:repeat>. Lub możesz użyć PrimeFaces '<p:dataList> i ukryć listy punktowe z niektórymi CSS list-style-type: none.

Aktualizacja: zgłoszony problem został usunięty w Mojarra 2.1.12 i 2.2.0-m06. Więc jeśli możesz, po prostu uaktualnij do przynajmniej tej wersji.