How to update an element with a certain ID

Question

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" />

Please post the template you are using. Are there any other components in the `component` part? — user1983983, Mar 04 '15 at 14:38
You have panel grid with id panelGridChoice. Use firebug (or some other web development tool for html css inspection), try to find "panelGridChoice" id on generated html site, and check its id. You will see what you are trying to update and whats the real ID. Use example in Predrags answer, Its easy because you dont need to know full component id path — anotherUser, Mar 04 '15 at 14:49
Just look in generated HTML output for the right client ID. See the duplicate. — BalusC, Mar 04 '15 at 15:12
@BalusC, the solution that you are mentioning, doesn't suit for my issue. I have analyzed it, tried many varations of ids, without any success. — Szymon Roziewski, Mar 04 '15 at 15:56
The composite component id is missing in your attempts. It should be visible in HTML output. Perhaps in form of `j_idXXX` because you didn't explicitly specify it. — BalusC, Mar 04 '15 at 17:34

score 1 · Accepted Answer · answered Mar 04 '15 at 14:45

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).

answered Mar 04 '15 at 14:45

Predrag Maric

23,938
5
52
68

How to update an element with a certain ID

1 Answers1