Conditionally show dialog in Primefaces without backend intervention

Question

I'm trying to conditionally pop up a dialog in Primefaces 5.0 without using the backend via a <p:commandButton>.

I've looked here, here, and here and tried each of the offered solutions, but none of them work.

The problem I'm running into is how to get the dialog to show up on the page when you click the button; everything seems to be going smoothly up until then.

The XHTML for the buttons:

<c:choose>
  <c:when test="#{businessLayer.context eq 'REF_INFO'}">
    <p:commandButton value="Submit PA"
                     disabled="#{outcomes.size() eq 0 or businessLayer.ticket eq null}"
                     onclick="PF('refInfoDialog').show()"
                     actionListener="#{businessLayer.splund('submitting ref info pa')}"
                     type="button"/>
                <!-- onstart="PF('loadingResults').show()"
                     onerror="PF('errorDialog').show()"
                     oncomplete="PF('loadingResults').hide(); PF('refInfoDialog').show()"-->
  </c:when>
  <c:when test="#{businessLayer.context eq 'FAXBACK'}">
    <p:commandButton value="Submit PA"
                     disabled="#{outcomes.size() eq 0 or businessLayer.ticket eq null}"
                     onclick="PF('faxBackDialog').show()"
                     actionListener="#{businessLayer.splund('submitting faxback pa')}"
                     type="button"/>
                <!-- onstart="PF('loadingResults').show()"
                     onerror="PF('errorDialog').show()"
                     oncomplete="PF('loadingResults').hide(); PF('faxBackDialog').show()"/>-->
  </c:when>
  <c:otherwise>
    <p:commandButton value="Submit PA"
                     disabled="#{outcomes.size() eq 0 or businessLayer.ticket eq null}"
                     onstart="PF('loadingResults').show()"
                     onerror="PF('errorDialog').show()"
                     oncomplete="PF('loadingResults').hide()"
                     actionListener="#{businessLayer.splund('submitting regular pa')}"/>
  </c:otherwise>
</c:choose>

One of the dialogs:

<p:dialog widgetVar="refInfoDialog"
          id="refInfoDialog"
          closable="true"
          draggable="false"
          resizable="false"
          showHeader="true">
  <h:outputLabel for="refInfoInput" value="Ticket ID"/>
  <h:inputText id="refInfoInput"/>
  <p:commandButton value="OK"
                   onstart="PF('loadingResults').show()"
                   onerror="PF('errorDialog').show()"
                   oncomplete="PF('loadingResults').hide(); PF('refInfoDialog').hide(); _SUBMIT_REF_INFO()"/>
  <p:commandButton value="Cancel"
                   onstart="PF('loadingResults').show()"
                   onerror="PF('errorDialog').show()"
                   oncomplete="PF('loadingResults').hide(); PF('refInfoDialog').hide()"/>
</p:dialog>

#{businessLayer.splund(...)} is a logging function in the backend for debugging purposes, and the dialogs are defined in the same form element as the buttons.

The loadingResults and errorDialog dialogs show up as they are supposed to, when they're supposed to, but I can't get refInfoDialog or faxBackDialog to show up at all. I've tried putting PF('<dialog_name>').show() in various onclick="", oncomplete="", actionListener="", and onstart="", but it hasn't caused either of them to show up when their respective button is clicked.

UPDATE:

Turns out the onclick event is firing fine, but for some reason the dialog is being displayed behind other divs because it's outside the parent div. Isn't JSF wonderful? /sarcasm

have you tried `action` instead of `actionListener`? (with `oncomplete`) — rion18, Jul 08 '14 at 17:59
`#{businessLayer.splund(...)}` isn't the problem here, though. The problem is getting a commandButton's respective dialog to show up on the screen when the button is clicked. — RevanProdigalKnight, Jul 08 '14 at 18:17
Maybe this helps: [JSTL c:choose c:when not working in a JSF page](http://stackoverflow.com/a/7437930/870122) — perissf, Jul 09 '14 at 12:59
@perissf Not only was that not my problem, I figured out what was actually wrong. — RevanProdigalKnight, Jul 09 '14 at 13:51

score 0 · Accepted Answer · answered Jul 09 '14 at 13:53

Turns out that if you want a dialog to show up no matter where on the page a button is, it needs to be included after everything else or else it will be limited to the frame of the div in which it appears.

This kind of defeats the entire idea of being able to split the page into multiple subpages for development, though.

Conditionally show dialog in Primefaces without backend intervention

1 Answers1