组件在 ui:repeat 中具有相同的 id [英] Components are with the same id inside ui:repeat
问题描述
不幸的是，如果您尝试动态创建选项卡，primefaces 手风琴面板在 2.2.1 版中不能很好地工作.这是我的情况，如果用户点击添加图标，我需要创建手风琴，如果他点击 x 图标，我需要删除.没问题，我已经创建了自己的复合组件，如下所示:
<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:实施><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" render="#{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"/> <h:panelGroup layout="block" class="hrgi-conteudo-accordion clearfix"><c:insertChildren/></h:panelGroup></h:panelGroup></c:实施>
它工作正常，但我有一些特定的需求...手风琴选项卡的内容是一些选择和一个带有 inputField 和微调器的动态表(由我再次创建)，您可以在这里看到用户界面:
当用户在微调器中插入值时，标签Total das Parelas"应该更新，但它只会在对话框只有一个手风琴选项卡时更新！查看生成的 html 代码，我看到不同手风琴选项卡中的微调器是相等的！可能这就是我无法更新值的原因.这是这个对话框的代码:
<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:separator/><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="额外"><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}"高度=76"><p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.numero_parcela']}"><h:outputText value="#{formaPagamento.parcelas.indexOf(parcela)+1}"/></p:列><p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.vencimento_parcela']}"><hrgi:editableDate value="#{parcela.dataVencimento}" editable="true"/></p:列><p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.valor_parcela']}"><hrgi:spinner id="勇气"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="输入"/></hrgi:spinner></p:列></p:dataTable></h:panelGroup></h:panelGroup></hrgi:accordion></ui:repeat></h:panelGroup><p:commandLinkimmediate="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 索引:
我该如何解决这个问题???
这是一个 Mojarra 错误，当您将 UIData 组件嵌套在 UIRepeat 中时，它就会显现出来.我曾经将其报告为 issue 1830.到目前为止它还没有修复，它在 MyFaces 中按预期工作.UIRepeat 在 Mojarra 中有很多问题，但在 MyFaces 中效果很好.
如果您想/需要坚持使用 Mojarra 并且因此无法用 MyFaces 替换它，请考虑将 UIRepeat 替换为基于 UIData 的完整组件.战斧 <p:dataList> 并使用一些 CSS list-style-type: none 隐藏列表项目符号.
更新:报告的问题已在 Mojarra 2.1.12 和 2.2.0-m06 中修复.因此，如果可以，请至少升级到该版本.
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???
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.
这篇关于组件在 ui:repeat 中具有相同的 id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
