title: Cannot find component with identifier ":form:display" referenced from
body: <p>I used DataTable - Row Selection from prime faces to display list of users and when I run the page I faced this error </p>
  
  <pre><code>Cannot find component with identifier ":form:display" referenced from "j_idt24:people:0:selectButton".
  </code></pre>
  
  <p>code of page </p>
  
  <p>
      
      
      </p>
  
  <pre><code>&lt;!--    the part is very important 
  if we did not put  &lt;ui:composition&gt; will will get a very ugly UI
  --&gt;
      &lt;ui:composition&gt;
      &lt;h:head&gt;
          &lt;title&gt;Contacts&lt;/title&gt;
      &lt;/h:head&gt;       
  &lt;!--    the part is very important --&gt; 
  
      &lt;body&gt;
          &lt;h:form&gt;
  
            &lt;p:growl id="msgs" showDetail="true" /&gt;  
  
            &lt;p:dataTable id="people" var="person" value="#{personBean.users}"&gt;  
  
          &lt;p:column headerText="ID" style="width:24%"&gt;  
              &lt;h:outputText value="#{person.id}" /&gt;  
          &lt;/p:column&gt;  
  
          &lt;p:column headerText="Name" style="width:24%"&gt;  
              &lt;h:outputText value="#{person.name}" /&gt;  
          &lt;/p:column&gt;  
  
          &lt;p:column headerText="Sex" style="width:24%"&gt;  
              &lt;h:outputText value="#{person.sex}" /&gt;  
          &lt;/p:column&gt;  
  
          &lt;p:column headerText="Email" style="width:24%"&gt;  
              &lt;h:outputText value="#{person.email}" /&gt;  
          &lt;/p:column&gt;  
  
          &lt;p:column style="width:4%"&gt;  
                  &lt;p:commandButton id="selectButton"  oncomplete="personDialog.show()" icon="ui-icon-search" title="View"  update=":form:display" &gt;  
                      &lt;f:setPropertyActionListener value="#{person}" target="#{personBean.selectedPerson}" /&gt;  
              &lt;/p:commandButton&gt;  
          &lt;/p:column&gt;  
  
      &lt;/p:dataTable&gt;  
  
      &lt;p:dialog header="Person Detail" widgetVar="personDialog" resizable="false" id="perDlg"  
                  showEffect="fade" hideEffect="explode" modal="true"&gt;  
  
          &lt;h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;"&gt;  
  
  
  
              &lt;h:outputText value="Name:" /&gt;  
              &lt;h:outputText value="#{personBean.selectedPerson.name}" style="font-weight:bold"/&gt;  
  
              &lt;h:outputText value="Sex" /&gt;  
              &lt;h:outputText value="#{personBean.selectedPerson.sex}" style="font-weight:bold"/&gt;  
  
  
              &lt;h:outputText value="Email" /&gt;  
              &lt;h:outputText value="#{personBean.selectedPerson.email}" style="font-weight:bold"/&gt;  
  
  
  
          &lt;/h:panelGrid&gt;  
  
      &lt;/p:dialog&gt;  
  
          &lt;/h:form&gt;
      &lt;/body&gt;
          &lt;/ui:composition&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>what is the problem with my code ? </p>