Komponenty mają ten sam identyfikator wewnątrz ui: powtórz
Niestety primefaces accordionPanel nie działa dobrze w wersji 2.2.1, jeśli próbujesz tworzyć karty dynamicznie. To jest mój przypadek, muszę utworzyć akordeony, jeśli użytkownik kliknie ikonę dodawania i usunie, jeśli kliknie ikonę x. Nie ma problemu, stworzyłem własny komponent kompozytowy, tak jak 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>
Działa dobrze, ale mam pewne specyficzne potrzeby ... Zawartość zakładki akordeonu jest wybrana, a dynamiczna tabela z inputField i spinnerem (utworzona przeze mnie ponownie), możesz zobaczyć interfejs użytkownika tutaj:
Gdy użytkownik wstawia wartości w spinningach, etykieta „Total das parcelas” powinna zostać zaktualizowana, ale po prostu aktualizuje się, gdy okno dialogowe ma tylko jedną kartę akordeonu! Patrząc na wygenerowany kod HTML widziałem, że błystki w innej karcie akordeonu są równe! Prawdopodobnie z tego powodu nie mogę zaktualizować wartości. Oto kod tego okna dialogowego:
<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>
Na tym obrazku możesz zobaczyć, co się dzieje, identyfikator komponentu wewnątrz primefaces nie jest dołączony do ui: indeks powtórzeń:
Jak mogę rozwiązać ten problem?