p:dialog not showing up - jsf

Question

I'm having a issue with JSF / Primefaces to display the popup.
As a background, I'm using JSF templates to generate my pages:
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.
<h:body>
<p:dataTable id="lstUsers" var="u" value="#{userController.userList}" selectionMode="single"
selection="#{userController.selectedUser}" rowKey="#{u.login}" paginator="true" rows="10">
<p:column headerText="Username">
<h:outputLabel value="#{u.login}"></h:outputLabel>
</p:column>
<p:column headerText="Role" rowspan="2">
<h:outputLabel value="#{u.role}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="bttAdd" type="button" value="Add" update=":contentView:idPanelPop" oncomplete="userDialog.show()" ></p:commandButton>
<p:commandButton id="bttEdit" value="Edit"></p:commandButton>
<p:commandButton id="bttRemove" value="Remove"></p:commandButton>
</f:facet>
</p:dataTable>
<p:dialog id='userDialog' header="User Details" widgetVar="userDialog"
resizable="false" width="200px" height="200px" showEffect="clip" hideEffect="fold">
<h:panelGrid id="idPanelPop" columns="2">
<h:outputLabel id='dOutUser' value="Username"></h:outputLabel>
<h:outputLabel id='dOutUserValue' value="#{userController.selectedUser.login}"></h:outputLabel>
<h:outputLabel id='dOutRole' value="Role"></h:outputLabel>
<h:outputLabel id='dOutRoleValue' value="#{userController.selectedUser.role}"></h:outputLabel>
</h:panelGrid>
</p:dialog>
</h:body>
The above code is used as part of
<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">
<ui:define id="contentViewIndex" name="content">
<ui:include src="#{navigationController.currentPage}"></ui:include>
</ui:define>
</ui:composition>
My template page contains the following:
<p:layoutUnit position="center">
<h:form id="contentView">
<ui:insert name="content">
Default Content
</ui:insert>
</h:form>
</p:layoutUnit>
The navigationController.current value changes as per menu click to navigates across the pages.
I'm following the oficial primafaces showcase PrimeFaces datatable
I'm current setup is Netbeans 7.3 RC1 / Apache 7.0.34.0 / Mojarra 2.1.13
I'll appreacite if someone could point me to the right direction to solve this :)
EDIT: 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. :/

Answer 1

Your bttAdd button is ordinary push button (you set it explicitly with type="button" attribute). This means it just do some JavaScript, without any AJAX requests. To do an AJAX request, and update your panel remove type="button" and try than.

Answer 2

I would change 2 things (first maybe not important):
Add 2 forms: one with data table inside and another inside dialog
change widgetVar="userDialog" to something unique. widgetVar="userDialogWidget"

Answer 3

Found the issue ...
After lots of tests and digging and taking into account the previous answers. The problem was two things:
1st. The diagonal height and width cannot have px in it.
2nd. And as per previous answers, it has to be outside as
here explained.
The p:dialog cannot have px in the sizes.