primefaces dialog does not show up on button click

Question

I have primefaces version 6.0 and i'm experiencing this issue of a dialog not showing up.

This is the button.

<p:commandButton id="newRequestButton"
                 class="btn btn-lg btn-primary" 
                 value="New Request"
                 update=":newRequestForm:newRequestDialog" 
                 oncomplete="PF('newRequest').show()" />

And this is the dialog

<p:dialog header="Request Definitions" widgetVar="newRequest"
                  resizable="true" width="600" showEffect="explode"
                  hideEffect="explode" modal="true" height="300" 
                  class="modal-dialog">
    <h:form id='newRequestForm'>
        <h:panelGrid id="newRequestDialog" columns="1" cellpadding="4"        
                     class="modal-content">

        </h:panelGrid>
    </h:form>
</p:dialog>

Whatcould be the problem. I have followed several answers such as this this and this to no avail.

EDIT: Where exactly are dialogs supposed to be placed in respect to forms and the commandButtons activating them?

What did you investigate in logging? Browser console? Did you try updating dialog content and then showing it instead of updating the dialog? — Kukeltje, Jan 24 '17 at 10:43
@Kukeltje as you can see i'm updating the `h:panelGrid` which has the content of the dialog — Obb, Jan 24 '17 at 11:14
Sorry, misread that... :-( Form should be in a dialog when it is modal and has a 'appendTo' of body (see the PF docs. The position in relation to the commandButton is not really relevant. There is not reason this should not work, unless the call to the server is not made due to the commandButton not working at all, which can be tested by replacing the 'show' with a plain javascript alert. — Kukeltje, Jan 24 '17 at 11:36
@Kukeltje even with `appendTo` nothing happens, why would the `commandButtons' not work? — Obb, Jan 24 '17 at 12:06
I did not say you should use appendTo, I stated that when it is used, you need the form to be inside the dialog. Why would commandButtons not work, well.... http://stackoverflow.com/questions/2118656/commandlink-commandbutton-ajax-backing-bean-action-listener-method-not-invoked — Kukeltje, Jan 24 '17 at 12:08

ArgaPK · Answer 1 · 2017-01-24T14:40:21.877

0

You need to put commandButton and dialog in h:form tag with a id attribute like "form" and then in update attribute of commandButton, first write "form"(value of id attribute of h:form which contains button and dialog). try the below code:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
    <h:head>
   </h:head>
    <h:body>
    <h:form id="form">

         <p:commandButton id="newRequestButton"
                 class="btn btn-lg btn-primary" 
                 value="New Request"
                 update=":form:newRequestDialog" 
                 oncomplete="PF('newRequest').show()" />

         <p:dialog header="Request Definitions" widgetVar="newRequest"
                  resizable="true" width="600" showEffect="explode"
                  hideEffect="explode" modal="true" height="300" 
                  class="modal-dialog">

       <p:outputPanel id="newRequestDialog" style="text-align:center;"> 

        <p:panelGrid  columns="1" class="modal-content">

        </p:panelGrid>

       </p:outputPanel>

         </p:dialog> 

        </h:form>
</h:body>
</html>

edited Jan 24 '17 at 14:40

answered Jan 24 '17 at 13:30

ArgaPK

455
1
9
22

My code is actually similar but the forms are not nested. But this still does not work. Im using chrome. Turned on developer options and on the console I receive no error messages or any messages at all on clicking. – Obb Jan 24 '17 at 13:39
well the above code is working fine in primefaces 5.0 – ArgaPK Jan 24 '17 at 13:46
now try the above edited code, it's not containing nested form and and dialog is also opening on clicking commandButton – ArgaPK Jan 24 '17 at 13:51
Still the same issue. – Obb Jan 24 '17 at 13:58
What is the issue? Is dialog is not opening ? or The panelGrid is not getting updated?? – ArgaPK Jan 24 '17 at 14:00
The dialog is not opening – Obb Jan 24 '17 at 14:01
@Obby did you put your p:commandButton tag and p:dialog tag in h:form tag as stated above??? And Did you write this ""update=":form:newRequestDialog" "" in p:commandButton??? ""newRequestDialog is the id of p:outputpanel and it is not an id of p:panelgrid."" – ArgaPK Jan 24 '17 at 14:08
I actually copied the same exact dialog above and replaced it where my own was – Obb Jan 24 '17 at 14:12
@Obby good to hear that. if you did also update p:commandButton update attribute and have p:commandButton and p:dialog in h:form with id="form" then your code should have been working. – ArgaPK Jan 24 '17 at 14:17
@Obby try the above answer(code) in a separate .xhtml file , that will surely work and may be you will get something helpful for future. – ArgaPK Jan 24 '17 at 14:42

score -1 · Accepted Answer · answered Jan 25 '17 at 12:36

-1

The problem was that I had included both bootstrap jquery and the jquery bundled by primefaces. Disabling the bootstrap jquery worked.

answered Jan 25 '17 at 12:36

Obb

163
4
12

Then you most likely had errors in the JS console... Next time please create a [mcve]... Now nothing that cause your problem was visible. – Kukeltje Jan 25 '17 at 17:30

primefaces dialog does not show up on button click

2 Answers2