When to use :(colon) in rendering in jsf components

Question

i have read that, we should use :(colon) to render components in other form. but in my case

<h:form id="form">
    <p:growl id="messages"></p:growl>
    <p:dataTable var="e" value="#{employees.eList}" id="elist1"
        editable="true">
        <f:facet name="header">
        In-Cell Editing
    </f:facet>
        <p:ajax event="rowEdit" listener="#{employees.onEdit}" update=":form:messages"/>

        <p:ajax event="rowEditCancel" listener="#{employees.onCancel}" />

        <p:column headerText="name" style="width:30%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{e.name}" />
                </f:facet>
                <f:facet name="input">
                    <h:inputText value="#{e.name}" style="width:100%" />
                </f:facet>
            </p:cellEditor>
        </p:column>
..........   ...........
</p:datatable>

i want to update messages(growl) from datatable component why i have to use colon update=":form:messages"

Answer 1

All relative client IDs (the ones not starting with :) are searched relative to the parent component which implements the NamingContainer interface. As you can see in the linked javadoc, that are at least all UIForm and UIData components. The <h:form> is such one. The <p:dataTable> is another one.

In your particular case, the <p:ajax> is enclosed in <p:dataTable>. So, the <p:ajax update="messages"> would look for a child component with ID messages inside the context of <p:dataTable>. However, since there is none, it won't find anything. You actually need to use an absolute client ID instead because it's outside the context of the current NamingContainer parent.

See also:

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"