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

Question

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() }"

JSF 2.0
Primefaces 5
Java 1.7

nuno · Answer 1 · 2014-08-18T11:55:08.580

9

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 ()

edited Aug 18 '14 at 11:55

answered Aug 18 '14 at 09:00

nuno

1,771
1
19
48

is the menuitem re-rendered with this update command? if not, forgive me but i just cannot figure out how it works. :) – tt_emrah Aug 18 '14 at 10:52
the menuitem is not updated - the menuitem is independent to `dialogForm`. However I don't think it would do any harm if the form included the the menuitem (paying attention to ids and namingcontainers) – nuno Aug 18 '14 at 10:53
so how is the `if (#{backingBean.conditionFlag})` part updated when ajax request is completed? – tt_emrah Aug 18 '14 at 10:55
I think the trick is the `oncomplete` attribute: if `onclick` is used there is no guarantee the `if (#{backingBean.conditionFlag})` executes __after__ the `actionListener` executes – nuno Aug 18 '14 at 10:58
1

i believe menuitem **must** be updated indeed. because yes, oncomplete works after the action listener, but it is not enough. if you do not update menuitem, that if clause will remain the same after initial page load. – tt_emrah Aug 18 '14 at 11:01
Agreed - but I believe viewscope solves that problem – nuno Aug 18 '14 at 11:49
afaik, view scope is not related to that. i tried it just now, and it doesn't work if i don't update the menuitem. i believe you also update it some other way. anyway, i'm glad it worked. – tt_emrah Aug 18 '14 at 11:52
Now that I think about it, your point makes perfect sense. Somehow my menuitem (the conditionFlag) is being updated in the `if` clause - despite it is working, I updated my code and added `@this` to my `update` attribute. – nuno Aug 18 '14 at 11:54

tt_emrah · Accepted Answer · 2014-08-14T15:01:28.820

5

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

edited Aug 14 '14 at 15:01

answered Aug 14 '14 at 14:53

tt_emrah

1,043
1
8
19

I was missing the update but not on `@this`, I provided my own answer to complete yours – nuno Aug 18 '14 at 09:02

kolossus · Answer 3 · 2014-08-15T19:43:03.027

3

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.

edited Aug 15 '14 at 19:43

answered Aug 14 '14 at 20:51

kolossus

20,559
3
52
104

Very nice if it works, but won't it require a full page reload? http://stackoverflow.com/questions/10050669/difference-between-rendered-and-visible-attributes-of-pdialog – Jaqen H'ghar Aug 15 '14 at 05:30
@JaqenH'ghar- no it won't, but good catch - I forgot to add the bit that ajax-updates the dialog – kolossus Aug 15 '14 at 19:42
I get the difference between rendered and visible attributes - I feel it is more correct not to render at all because, in my case, the dialog will show different (server-side originated) data each time it is showed, so I'm opting by the rendered alternative – nuno Aug 18 '14 at 08:51
@kolossus I got it working - I noticed the ajax update was missing and that was it, going to provide my own answer - I could consider this the correct answer (because the update was missing and I noticed it when reading your comments) but the fundamentals of the answer wouldn't meet what was not working. So I'm just gonna +1 it – nuno Aug 18 '14 at 09:00

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

3 Answers3

Linked