通过ajax重新渲染复合组件答案

【问题标题】：Rerendering composite component by ajax通过ajax重新渲染复合组件
【发布时间】：2013-08-25 03:20:22
【问题描述】：

我已经构建了一个看起来像这样的复合组件：

<composite:interface>
  <composite:attribute name="id" required="false" />
  <composite:attribute name="label" required="true" />
</composite:interface>

<composite:implementation>
  <h:panelGroup id="#{cc.attrs.id}">
    <fieldset class="fieldset"><legend>${cc.attrs.label}</legend></fieldset>
  </h:panelGroup>  
</composite:implementation>

compent 正确显示当前标签。

<xyz:comp id="idMyComponent" label="#{someBean.text}"/>

...
<a4j:ajax ... render="idMyComponent" />
...

现在，当执行该操作时，什么也没有发生。但是，当我将 Postfix 添加到组件中的 ID 时，它可以正常工作（见下文）。

...
<composite:implementation>
      <h:panelGroup id="#{cc.attrs.id}Label">
...

并在render中用后缀定义ID：

<xyz:comp id="idMyComponent" label="#{someBean.text}"/>

...
<a4j:ajax ... render="idMyComponentLabel" />
...

有人可以向我解释为什么它只在我向h:panelGroup 中的 ID 添加后缀时才有效吗？

【问题讨论】：

标签： ajax jsf-2 composite-component

【解决方案1】：

这个问题实际上是双重的。

第一个问题是<xyz:comp id>实际上指定了复合组件本身的ID，即<cc:implementation>。默认情况下，这在 HTML 输出中没有表示，因此 ajax/JavaScript 无法通过 document.getElementById() 和朋友找到它。

实际上，您的<h:panelGroup id="#{cc.attrs.id}"> 最终生成的HTML 输出如下（右键单击页面并查看源代码 自己查看）：

<span id="idMyComponent:idMyComponent">

第二个“问题”是 RichFaces/Ajax4jsf 增强了通过相对客户端 ID（即不以 : 开头）在树中的 JSF 组件的引用/查找，而不仅仅是在当前 @987654330 的上下文中进行搜索@，但也在所有其他 NamingContainer 组件中。复合组件本质上也是NamingContainer 组件。

您的第一次尝试失败了，因为它找到了组合本身而不是面板组，但是 JS/ajax 又无法更新，因为在生成的 HTML 输出中不存在任何带有 id="myComponent" 的 HTML 元素。

您的第二次尝试成功了，因为它终于找到了真正的面板组（注意：因为它还在所有其他 NamingContainer 组件中进行了搜索；如果您使用 <f:ajax> 而不是 <a4j:ajax>，这仍然会失败）。

解决问题的正确方法不是在 JSF 组件上使用 #{cc.attrs.id}，而是在纯 HTML 元素上使用 #{cc.clientId}。

<span id="#{cc.clientId}">

（是的，在<cc:implementation> 中使用<span> 或<div> 而不是<h:panelGroup>）

这样 JSF 可以通过客户端 ID 找到组件（以便生成正确的 ajax 响应）并且 JS 可以通过客户端 ID 找到 HTML 元素（以便基于更新正确的 HTML 元素关于 ajax 响应）。

另见：

【讨论】：