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

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"