错误：<f:ajax> 与复合材料一起使用时包含未知 id:insertChildren答案

【问题标题】：Error: <f:ajax> contains an unknown id when used with composite:insertChildren错误：<f:ajax> 与复合材料一起使用时包含未知 id:insertChildren
【发布时间】：2012-04-06 13:20:09
【问题描述】：

我定义了一个复合组件（实际上是几个），当我尝试重新渲染一个使用插入的组件时，我收到了提到的错误：

<f:ajax> contains an unknown id ':contentFrm' - cannot locate it in the context of the component j_idt40

如果我只是替换：

<et:pageContent formId="contentFrm">

与

<h:form id="contentFrm">
<div>

然后一切正常

以下是相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite"> 

    <composite:interface>
        <composite:attribute name="styleClass" default="access-box-content alpha omega grid-12" />
        <composite:attribute name="formId" default="#{cc.attrs.id}" />
    </composite:interface>
    <composite:implementation>
        <h:form id="#{cc.attrs.formId}">
            <div class="#{cc.attrs.styleClass}">
                <composite:insertChildren/>
            </div>
        </h:form>
    </composite:implementation>
</html>

这就是我使用复合材料的方式

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition id="landing" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:et="http://java.sun.com/jsf/composite/components"
                template="/layout/template.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="main-content">
        <et:pageTitle title="#{msg.trx_lastTrx}" />
        <et:tabBar formId="currentTrxFrm">    
            <et:tab bean="#{accountTransactionBacking}"
                    prompt="#{msg.trx_currentTrxs}"
                    reRender=":contentFrm"
                    tabId="1"
                    active="true"/>
        </et:tabBar>
        <et:pageContent formId="contentFrm">
                <et:tabContentPanel rendered="#{accountTransactionBacking.selectedTab ==1}">
                    <ui:include src="/app/summary/currentTrxRG.xhtml" rendered="#{accountTransactionBacking.selectedTab ==1}"/>
                </et:tabContentPanel>
        </et:pageContent>
    </ui:define>
</ui:composition>

TIA

更多测试.. 使用相同的组件得到相同的结果.. 例如以下代码给出了类似的错误（甚至将 render="accountSummaryLines" 替换为 render=":accountSummaryLines"）..

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition id="landing" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:et="http://java.sun.com/jsf/composite/components"
                template="/layout/template.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="main-content">
        <et:pageTitle title="#{msg.ls_lastStatement}" />

        <et:tabBar formId="acctSummTabFrm">
            <et:tab/> 
        </et:tabBar>

            <et:pageContent formId="accountButtonsFrm">

                ....

                <et:div styleClass="accountSummaryLines" divId="lastStatementLines">
                    <ui:repeat var="row" value="#{lastStatementBacking.lines.data}">
                        <h:outputText escape="false" value="#{row}" styleClass="grid-12 lastStatementDetail"/><br></br>
                    </ui:repeat>
                </et:div>
                <et:div styleClass="access-box-footer">
                    <h:commandButton styleClass="left" action="#{lastStatementBacking.lines.prevPage}" value="#{msg.buttonPrevPage}" style="float:left;">
                        <f:ajax render="accountSummaryLines" />
                    </h:commandButton>
                    <h:commandButton styleClass="right" action="#{lastStatementBacking.lines.nextPage}" value="#{msg.buttonNextPage}">
                        <f:ajax render="accountSummaryLines" />
                    </h:commandButton>
                </et:div>
            </et:pageContent>
    </ui:define>
</ui:composition>

我让这个特定示例工作的唯一方法是像这样使用 render="@form"..

【问题讨论】：

标签： ajax jsf jsf-2 facelets composite-component

【解决方案1】：

找不到它，因为复合组件本身就是NamingContainer。 real 有效的客户端 ID 将是 :idOfComposite:contentFrm，其中 idOfComposite 是复合组件本身的（自动）生成的 ID。如果您在网络浏览器中执行查看源代码并找到有问题的<form>，那么您会看到它。

你需要给复合组件一个固定的ID

<et:pageContent id="contentFrm">

并在包含复合内容的普通 HTML 元素上准确使用此 ID，例如<div> 或 <span>。

<composite:implementation>
    <div id="#{cc.id}">
        <h:form>
            <div class="#{cc.attrs.styleClass}">
                <composite:insertChildren/>
            </div>
        </h:form>
    </div>
</composite:implementation>

【讨论】：

感谢@BalusC！这解决了我的问题。我实际上离开了<form id="#{cc.attrs.formId}">，因为我需要它来进行 2 示例。唯一的事情是我必须使用这个<et:pageContent id="lastStatementPC" formId="lastStatementFrm"> ... <et:div id="lastStatementLines"> <ui:repeat var= ... </ui:repeat></et:div> ... <h:commandButton action="#{lastStatementBacking.lines.prevPage}" value="#{msg.buttonPrevPage}" style="float:left;"> <f:ajax render=":lastStatementPC:lastStatementFrm:lastStatementLines:lastStatementLinesComponent"/> </h:commandButton> 没有更短的方法.. :-) （我知道，我知道...@form）