组件在ui:repeat中具有相同的ID [英] Components are with the same id inside ui:repeat
问题描述
不幸的是，如果您尝试动态创建选项卡，则primefaces手风琴面板在2.2.1版中不能很好地工作.这是我的情况，如果用户单击添加图标，我需要创建手风琴，如果单击x图标，则需要删除手风琴.没问题，我已经创建了自己的复合组件，就像您在这里看到的一样:
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>
它工作正常，但是我有一些特定的需求...手风琴选项卡的内容是一些select和一个带有inputField和spinner的动态表(由我再次创建)，您可以在此处看到用户界面:
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:
当用户在微调器中插入值时，标签"Total das parcelas"应该更新，但是仅在对话框只有一个手风琴标签时才更新！查看生成的html代码，我已经看到differents手风琴选项卡中的微调器是相等的！可能这就是我无法更新值的原因.这是此对话框的代码:
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>
在此图中，您可以看到正在发生的情况，primefaces数据表中的组件ID未附加ui:repeat index:
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???
推荐答案
这是Mojarra错误，当您将UIData组件嵌套在UIRepeat中时，该错误就会显现.我曾经将其报告为问题1830 .到目前为止，它尚未修复，并且可以在 MyFaces 中正常运行. UIRepeat在Mojarra中有很多破损，但在MyFaces中可以完美使用.
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.
如果您希望/需要坚持使用Mojarra，因此无法用MyFaces替换它，请考虑用一个完全有价值的基于UIData的组件替换UIRepeat. 战斧兵 <p:dataList> 并使用一些CSS隐藏列表项目符号list-style-type: none.
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.
更新:报告的问题已在Mojarra 2.1.12和2.2.0-m06中修复.因此，如果可以，请至少升级到该版本.
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.
这篇关于组件在ui:repeat中具有相同的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
