p:dialog not showing up

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. :/

Possible duplicate: http://stackoverflow.com/q/14381602/1530938 — kolossus, Feb 11 '13 at 14:26
thanks for the tip but unfortunately what happens there does not apply to my scenario. My form is part of the template and inside it calls the pages that needs to be rendered. This way I can navigate in the site and update the content dynamically. I'll try to have the page as standalone and see if it works. — Alexandre Alves, Feb 11 '13 at 15:03

score 0 · Answer 1 · answered Feb 11 '13 at 10:26

0

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.

answered Feb 11 '13 at 10:26

partlov

13,789
6
63
82

score 0 · Answer 2 · answered Feb 11 '13 at 12:05

0

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"

answered Feb 11 '13 at 12:05

Darka

2,762
1
14
31

If I do that, I'll have

! From what I've been reading from inside form is a bad idea. Right?
– Alexandre Alves Feb 11 '13 at 12:53
I am not sure about
. You can check generated source. How about changing widgetVar name?
– Darka Feb 11 '13 at 14:01
just changed to not avail. Changed the widgetVar to a unique value and also updated the oncomplete to point to the widgetVar. But nothing. – Alexandre Alves Feb 11 '13 at 14:50
as you see @kolossus gave you what I said. Bring dialog outside form. – Darka Feb 11 '13 at 14:55

score 0 · Accepted Answer · edited Oct 27 '15 at 12:59

0

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.

edited Oct 27 '15 at 12:59

Jeffrey Kevin Pry

3,266
3
35
67

answered Feb 12 '13 at 12:07

Alexandre Alves

411
2
10
20

p:dialog not showing up

3 Answers3