在 f:ajax 渲染中引用复合组件 ID

Question

我正在编写一个复合组件，用于包装输入元素，并在其下方添加一个“可选字段”名称和 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* 元素，该元素应该是它在 using 页面中的第一个和直接子元素。

在使用页面中，我会写：

    <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

谢谢

Answer 1

这是因为复合组件本身不会向 HTML 呈现任何内容。只有它的孩子被渲染为 HTML。f1:i11生成的 HTML 输出中不存在任何带有 ID 的 HTML 元素。在浏览器中打开页面，右键单击并查看源代码。自己进去看看。没有具有该 ID 的此类元素。JavaScript/Ajax 遇到了完全相同的问题。它找不到要更新的元素。

要解决此问题，您需要将整个复合主体包装在 HTML 中，<div>或者<span>为其分配一个 ID，#{cc.clientId}其ID基本上为 prints 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 ajax 更新非 JSF 组件（纯 HTML）？
• 如何找出ajax更新/渲染组件的客户端ID？找不到从“bar”引用的表达式“foo”的组件