我正在编写一个复合组件，旨在包装一个输入元素，并在其下方添加一个“可选字段”名称和 h:message 元素。 这是组件(在 input.xhtml 文件中):
<composite:interface/>
<composite:implementation>
<div>
#{component.children[1].setStyleClass(component.children[1].valid ? '' : 'inputError')}
<composite:insertChildren/>
</div>
<h:panelGroup styleClass="optional"
rendered="#{!component.parent.children[1].required}"
layout="block" >
#{msgs['common.optional.field']}
</h:panelGroup>
<h:message id="msgId"
for="#{component.parent.children[1].id}" errorClass="error"/>
</composite:implementation>
同样，该组件的预期用途是包装一个 h:input* 元素，该元素应该是它在使用页面中的第一个和直接子元素。
然后在使用页面中我会写:
<h:form id="f1">
<h:panelGrid border="0" columns="2" style="width: 80%">
<f:facet name="header">
<col width="40%" />
<col width="60%" />
</f:facet>
<h:outputLabel styleClass="sectionBody" for="i1"
value="Input 1"></h:outputLabel>
<my:input id="ii1">
<h:inputText id="i1" size="20" maxlength="20" tabindex="0"
required="true" label="Input 1">
</h:inputText>
</my:input>
<h:outputLabel styleClass="sectionBody" for="i2"
value="Input 2"></h:outputLabel>
<my:input id="ii2">
<h:inputText id="i2" size="20" maxlength="20" tabindex="0"
label="Input 2">
</h:inputText>
</my:input>
</h:panelGrid>
<br />
<h:commandButton value="Submit" tabindex="1">
<f:ajax listener="#{terminalImportBean.addTerminal}"
execute="@form" render="@form"/>
</h:commandButton>
</h:form>
这在使用普通帖子时效果很好。 但是，如果我为“输入 1”(id="i1") 添加 f:ajax 验证并尝试使用以下方法重新呈现复合 (ii1):
...
<h:outputLabel styleClass="sectionBody" for="i1"
value="Input 1"></h:outputLabel>
<my:input id="ii1">
<h:inputText id="i1" size="20" maxlength="20" tabindex="0"
required="true" label="Input 1">
<f:ajax listener="#{myBean.checkInput1}"
event="blur"
render="ii1"/>
</h:inputText>
</my:input>
...
我在 ajax 响应处理期间在浏览器中生成错误:
malformedXML: During update: f1:ii1 not found
我试过使用f1:ii1、:f1:ii1，但没有用。当我使用 msgId 或 :f1:ii1:msgId 时，它起作用了。有人知道为什么吗？
我正在使用 Mojarra 2.1.3
谢谢
最佳答案
那是因为复合组件自身不会向 HTML 呈现任何内容。只有它的 child 被呈现为 HTML。不存在任何 ID 为 f1:i11 的 HTML 元素在生成的 HTML 输出中。在浏览器中打开页面，右键单击并查看源代码。自己进去看看。不存在具有该 ID 的此类元素。 JavaScript/Ajax 遇到了完全相同的问题。它找不到要更新的元素。
要解决这个问题，您需要将整个复合体包装在 HTML 中 <div>或 <span>并为其分配一个 ID #{cc.clientId}基本上打印 UIComponent#getClientId() .
<cc:implementation>
<div id="#{cc.clientId}">
...
</div>
</cc:implementation>
然后你可以引用如下:
<my:input id="foo" />
...
<f:ajax ... render="foo" />
您甚至可以引用特定的复合组件子组件。
<f:ajax ... render="foo:inputId" />
另见:
关于jsf - 在 f :ajax render 中引用复合组件 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13313207/