title: p:dialog not showing up
body: <p>I'm having a issue with JSF / Primefaces to display the popup.
  As a background, I'm using JSF templates to generate my pages:</p>
  
  <p>The inline works to show the datatable but when I click the button to show the dialog nothing happens. I don't see any error in the logs.</p>
  
  <pre><code>&lt;h:body&gt;
      &lt;p:dataTable id="lstUsers" var="u" value="#{userController.userList}" selectionMode="single" 
                   selection="#{userController.selectedUser}" rowKey="#{u.login}" paginator="true" rows="10"&gt;
          &lt;p:column headerText="Username"&gt;
              &lt;h:outputLabel value="#{u.login}"&gt;&lt;/h:outputLabel&gt;
          &lt;/p:column&gt;
          &lt;p:column headerText="Role" rowspan="2"&gt;
              &lt;h:outputLabel value="#{u.role}"&gt;&lt;/h:outputLabel&gt;
          &lt;/p:column&gt;
          &lt;f:facet name="footer"&gt;
              &lt;p:commandButton id="bttAdd" type="button" value="Add" update=":contentView:idPanelPop" oncomplete="userDialog.show()" &gt;&lt;/p:commandButton&gt;
              &lt;p:commandButton id="bttEdit" value="Edit"&gt;&lt;/p:commandButton&gt;
              &lt;p:commandButton id="bttRemove" value="Remove"&gt;&lt;/p:commandButton&gt;
          &lt;/f:facet&gt;
      &lt;/p:dataTable&gt;
      &lt;p:dialog id='userDialog' header="User Details" widgetVar="userDialog" 
                resizable="false" width="200px" height="200px" showEffect="clip" hideEffect="fold"&gt;
          &lt;h:panelGrid  id="idPanelPop" columns="2"&gt;
              &lt;h:outputLabel id='dOutUser' value="Username"&gt;&lt;/h:outputLabel&gt;
              &lt;h:outputLabel id='dOutUserValue' value="#{userController.selectedUser.login}"&gt;&lt;/h:outputLabel&gt;
  
              &lt;h:outputLabel id='dOutRole' value="Role"&gt;&lt;/h:outputLabel&gt;
              &lt;h:outputLabel id='dOutRoleValue' value="#{userController.selectedUser.role}"&gt;&lt;/h:outputLabel&gt;
          &lt;/h:panelGrid&gt;
      &lt;/p:dialog&gt;
  &lt;/h:body&gt;
  </code></pre>
  
  <p>The above code is used as part of </p>
  
  <pre><code>&lt;ui:composition template="./maintemplate.xhtml"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:p="http://primefaces.org/ui"
                  xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
      &lt;ui:define id="contentViewIndex" name="content"&gt;
          &lt;ui:include src="#{navigationController.currentPage}"&gt;&lt;/ui:include&gt;
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>My template page contains the following:</p>
  
  <pre><code>        &lt;p:layoutUnit position="center"&gt;
                  &lt;h:form id="contentView"&gt;
                      &lt;ui:insert name="content"&gt;
                              Default Content
                      &lt;/ui:insert&gt;
                  &lt;/h:form&gt;    
          &lt;/p:layoutUnit&gt; 
  </code></pre>
  
  <p>The <strong>navigationController.current</strong> value changes as per menu click to navigates across the pages.
  I'm following the oficial primafaces showcase <a href="http://www.primefaces.org/showcase/ui/datatableRowSelectionSingle.jsf" rel="nofollow">PrimeFaces datatable</a></p>
  
  <p>I'm current setup is Netbeans 7.3 RC1 / Apache 7.0.34.0 / Mojarra 2.1.13 </p>
  
  <p>I'll appreacite if someone could point me to the right direction to solve this :)</p>
  
  <p><strong>EDIT:</strong> After taking account the answer inline nothing works.
  Maybe I should had checked first the brower console, and in this case it's weird cause it complains that it does not recognize the widgedVar.
  I already tried to put the Dialog outsite the form and the result is the same error. :/</p>