How to update an element with a certain ID [duplicate] - jsf

Question

This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 7 years ago.
What I would like to do is to update orderList in every time when checkbox has been (un-)checked.
My component is unaccessible with faces error. The component is inside form with 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".
I have tried several solutions including: :form, form, :orderList, orderList, form:panelGridChoice:orderList, :panelGridChoice:orderList, :form:panelGridChoice:orderList, :form:orderList
This is my view
<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>
Where answerDecorator.xhtml is defined as
<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" />

Answer 1

This can be really annoying, so in situations like this I usually target the components by style class. Try adding styleClass="orderList" to <p:orderList>, and target it with #(.orderList).