如何更新具有特定 ID 的元素 [重复]答案

【问题标题】：How to update an element with a certain ID [duplicate]如何更新具有特定 ID 的元素 [重复]
【发布时间】：2015-03-04 14:26:04
【问题描述】：

我想做的是在每次（取消）选中复选框时更新 orderList。

我的组件因人脸错误而无法访问。该组件在form 和id="form" 内

14:33:29,614 SEVERE [javax.enterprise.resource.webcontainer.jsf.application] (default task-9) Error Rendering View[/pages/view.xhtml]: javax.faces.FacesException: Cannot find component with expression ":form:orderList" referenced from "form:j_idt34:j_idt88:j_idt96:0:j_idt100".

我尝试了几种解决方案，包括：:form、form、:orderList、orderList、form:panelGridChoice:orderList、:panelGridChoice:orderList、:form:panelGridChoice:orderList、:form:orderList

这是我的看法

<composite:implementation>
    <h:outputStylesheet library="css" name="form.css"  />
    <h:outputScript>
        replaceMedia();
    </h:outputScript>
    <ui:decorate template="answerDecorator.xhtml">
        <ui:define name="additionalForms">
            <h:outputText value="#{cc.attrs.question.additionalExplanation}" styleClass="text-normal" escape="false" />
        </ui:define>
        <ui:define name="component">
        <p:panelGrid id="panelGridChoice" columns="1" cellpadding="0" styleClass="inline" columnClasses="" >
            <p:dataTable var="answer" value="#{cc.attrs.question.possibleAnswers}">
                <p:column headerText="#{msg['survey.question.chooseAnswerList']}" styleClass="thirty-percent">
                    <h:outputText value="#{answer.text}" />
                </p:column>
                <p:column headerText="#{msg['survey.question.chooseAnswer']}" styleClass="ten2-percent" >
                    <p:selectBooleanCheckbox value="#{answer.checked}" >
                        <p:ajax event="change" process="@this" update=":form:orderList" listener="#{cc.attrs.question.setCheckedAnswers}" />
                    </p:selectBooleanCheckbox>
                </p:column>
            </p:dataTable>
            <p:orderList id="orderList" value="#{cc.attrs.question.checkedAnswers2Order}" var="answer" itemLabel="#{answer.text}"
                         converter="entityConverter" itemValue="#{answer}" controlsLocation="left" >
                <f:facet name="caption">#{msg['survey.default.makeOrder']}</f:facet>
            </p:orderList>
        </p:panelGrid>
        </ui:define>
    </ui:decorate>
</composite:implementation>

answerDecorator.xhtml 定义为

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5" styleClass="borderless survey-panel-max">
    <h:outputText value="#{cc.attrs.question.questionText}" styleClass="text-header"/>
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" styleClass="borderless top-alignment">
        <ui:insert name="additionalForms" />
    </h:panelGrid>
</h:panelGrid>
<ui:insert name="component" />

【问题讨论】：

请发布您正在使用的模板。 component 部分是否还有其他组件？
不，我已经发布了更多内容。
您有面板网格，ID 为 panelGridChoice。使用 firebug（或其他一些用于 html css 检查的 Web 开发工具），尝试在生成的 html 站点上找到“panelGridChoice”id，并检查其 id。您将看到您要更新的内容以及真实 ID。在 Predrags 答案中使用示例，这很简单，因为您不需要知道完整的组件 ID 路径
只需在生成的 HTML 输出中查找正确的客户端 ID。查看副本。
@BalusC，您提到的解决方案不适合我的问题。我已经分析过了，尝试了许多不同的 id，但没有任何成功。

标签： jsf primefaces composite-component

【解决方案1】：

这真的很烦人，所以在这种情况下，我通常按样式类定位组件。尝试将styleClass="orderList" 添加到<p:orderList>，并使用@(.orderList) 定位它。

【讨论】：