CODEWITHSUNDEEP
jsfprimefacesmodal-dialog
nuno
nuno

Reputation: 1791

How to conditionally show p:dialog based on backing bean condition

Is there any way (or a correct way) to conditionally show a dialog on primefaces based on a backing bean condition? The code looks like the following:

<!-- dialog declaration -->
<p:dialog id="dialogTest" widgetVar="dialogTest" header="#{text['modal.header']}" modal="true" >
                <h:outputText value="Test output" />
            </p:dialog>
<!-- caller -->
<p:menuitem value="Check" actionListener="#{backingBean.performCheck}" oncomplete="PF('dialogTest').show()" icon="ui-icon-arrowthick-1-e"/>

My backing bean looks like the following:

private boolean conditionFlag; // ... +getter

public void performCheck() {
    // ... access managers (database)
    this.conditionFlag = dao.check();// some check;
}

I just want to show the dialog in case the conditionFlag is true. How can I do something like this on p:menuitem after performCheck runs?

oncomplete="if (#{backingBean.conditionFlag}) { PF('dialogTest').show() }"

Upvotes: 9

Views: 25961

Answers (3)

nuno
nuno

Reputation: 1791

I got this to work as follows

<!-- dialog declaration -->
<h:form id="dialogForm">
   <p:dialog id="dialogTest" 
             widgetVar="dialogTest" 
             header="#{text['modal.header']}" 
             modal="true">
               <h:outputText value="Test output" />
   </p:dialog>
</h:form>
<!-- caller -->
<p:menuitem value="Check" 
            actionListener="#{backingBean.performCheck}" 
            oncomplete="if (#{backingBean.conditionFlag}) { PF('dialogTest').show() }"
            icon="ui-icon-arrowthick-1-e" 
            update="@this, :dialogForm, :dialogForm:dialogTest"/>

The backing bean remains unaltered (as in the question).

The main difference is in the oncomplete attribute and the ajax update attribute ()

Upvotes: 9

kolossus
kolossus

Reputation: 20691

Just bind the boolean variable to the visible attribute of dialog.

<p:dialog id="dialogTest" visible="#{backingBean.conditionFlag}" widgetVar="dialogTest" header="#{text['modal.header']}" modal="true" >
    <h:outputText value="Test output" />
</p:dialog>

and then let the menu item execute as normal:

<p:menuitem value="Check" actionListener="#{backingBean.performCheck}" oncomplete="PF('dialogTest').show()" icon="ui-icon-arrowthick-1-e" update="dialogTest"/>

No extra work necessary. For best results, use a @ViewScoped bean.

Upvotes: 3

tt_emrah
tt_emrah

Reputation: 1053

just add update="@this" to the p:menuitem. then your oncomplete block will work as you expect it to.

Upvotes: 5

Related Questions