Question

Having the following xhtml code:

<h:form id="COTreeForm">
            <p:tree value="#{COBean.root}" var="node" id="COTree" dynamic="true" selectionMode="single">
                <p:ajax event="select" update="@(.coDetailsPanel)" listener="#{COBean.onNodeSelect}" />

                <p:treeNode id="COtreeNode" type="customerOrder" icon="ui-icon-co">
                    <p:outputPanel  id="CO_#{node.key}"> CO: #{node.key} </p:outputPanel>
                    <!--  <p:draggable for="CO_#{node.key}" helper="clone" />  -->  
                </p:treeNode>

                <p:treeNode id="COItreeNode" type="customerOrderItem">
                    <p:outputPanel id="COI_#{node.key}" styleClass="ui-tree-node-label-coi"> COI: #{node.key} </p:outputPanel>
                    <!--  <p:draggable for="COI_#{node.key}" helper="clone" />  -->
                </p:treeNode>

            </p:tree>

    </h:form>

The <p:outputPanel id="CO_#{node.key}"> CO: #{node.key} </p:outputPanel> is evaluated to the following HTML code:

<span id="COTreeForm:COTree:0:CO_"> CO: customer1_co1 </span>

Why #{node.key} is evaluated to an empty string for the id attribute?! Please notice that it’s evaluated correctly as the tag content.

Answer 1

The id (and binding) attributes are evaluated during view build time. The #{node} is however only available during view render time. For a more detailed explanation, read JSTL in JSF2 Facelets… makes sense?

Just don’t use _#{node.key} at all in all your id and for attributes. JSF/PrimeFaces will already autogenerate the right unique client IDs depending on the currently iterated tree node.