JSF: Dynamic include page into primefaces dialog

2
votes

I want to include the content of a primefaces dialog from another page with ui:include. The included page must be set dynamic depending on which button user clicked. I used the very helpful answer from BalusC from JSF dynamic include using Ajax request.

It works very fine as in the example. But problems come if I use a p:dialog instead of h:panelGroup:

<h:form>
  <f:ajax render=":dialog">
    <p:commandButton value="page1" action="#{productBean.setDialogPage('/page1.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
    <p:commandButton value="page2" action="#{productBean.setDialogPage('/page2.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
  </f:ajax>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget" >
        <ui:include src="#{productBean.dialogPage}" />
</p:dialog>

1st problem: Sometimes, I have to click a button several times before dialog appears. It seems not to follow any pattern but is a random effect. Sometimes I need to click twice, sometimes I need to click four times on the button.

2nd problem: Sometimes, the dialog appears not with the selected page but with the old one. When I close dialog and select again, the current page is loaded. It seems to be a random effect, too.

Why do I get this problems with dialog?

2
jsfjsf-2primefaces
I debugged calling of getDialogPage() and setDialogPage() in the Bean. I noticed, that when everything was OK, the call sequence was get-SET-get-get-get. But when I get the old wrong page, the sequence was get-get-get-SET-get. – Alexej Detert

2 Answers

8
votes

hy, i don't know why you are using this mode to display dynamique dialog, for me, i like use this mode:

<h:form>
<p:commandButton value="page1"
    actionListener="#{productBean.setDialogPage('page1')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
<p:commandButton value="page2"
    actionListener="#{productBean.setDialogPage('page2')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
</h:form>

<p:dialog id="dialog" widgetVar="dialogWidget">
    <ui:include src="/#{productBean.dialogPage}.xhtml" />
</p:dialog>

and:

page1.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

    <h:form>
           <!-- your code -->
    </h:form>
</ui:composition>

it's working fine :)

1
votes

If you reverse engineer existing tables with Netbeans 8 (generate entities + generate jsf pages), it will do something very similar out of the box; on the list page there is a create-button, which shows a dialog included from another page. You should try it, be sure to select "primefaces" in the last page in the guide for generating jsf pages. They do it like this:

List.xhtml:

<p:commandButton id="createButton" icon="ui-icon-plus"   value="#{bundle.Create}" actionListener="#{kornstoranalyseStdController.prepareCreate}" update=":KornstoranalyseStdCreateForm" oncomplete="PF('KornstoranalyseStdCreateDialog').show()" />

Create.xhtml is included with <ui:include src="Create.xhtml"/> below </h:form> in the list-page.

Create.xhtml starts with: 

 <ui:composition>

    <p:dialog id="KornstoranalyseStdCreateDlg" width="500px" widgetVar="KornstoranalyseStdCreateDialog" modal="true" resizable="true" showEffect="clip" appendTo="@(body)" header="#{bundle.CreateKornstoranalyseStdTitle}" hideEffect="clip" position="top">
        <h:form id="KornstoranalyseStdCreateForm">

Hopefully you can tweak to suit your needs.