Primefaces p:menuitem don't fire event when onclick event return true

Question

I'm using the PrimeFaces p:menuitem component to perform a deletion. In order to add a confirmation step, I used the onclick event in which a JavaScript confirm dialog is displayed. Below my code :

<p:menuitem icon="fa fa-fw fa-remove"
    title="#{message.global_remove}"
    value="#{message.global_remove}"
    actionListener="#{componentListMB.delete(cp.id)}"
    onclick="return confirm('#{message.component_list_confirm_deletion}')"
    update=":component_list" />

The action is not fired when the user confirm the deletion but, instead, a # is added at the end of the URL.

Why the event is not fired while in a p:commandButton everything works fine ?

I'm using:

JSF 2.1.7
Primefaces 6.0

score 6 · Accepted Answer · edited May 23 '17 at 12:16

The action is not fired when the user confirm the deletion but, instead, a # is added at the end of the URL.

Primefaces is actually rendering your p:menuitem as a a HTML tag, using the onclick event of the element to execute its own Ajax request. E.g.

onclick="PrimeFaces.ab({...});return false;"

Notice that they added a return false; at the end which prevents the default browser behaviour of the a element, therefore no # will appear in the URL.

When you add the confirm function, it is placed at the beginning of the onclick element as follows:

onclick="return confirm('confirm?');PrimeFaces.ab({...});return false;"

In case you don't confirm it, no # will appear in the URL since the default behaviour was prevented. If you do confirm it will appear. But the Ajax action will never be executed since you are calling the return statement in the first place.

You can achieve the expected behaviour changing your p:menuitem's onclick event as follows:

onclick="if (!confirm('#{message.component_list_confirm_deletion}')) return false;"

Why the event is not fired while in a p:commandButton everything works fine ?

Primefaces treats differently the p:commandButton. It wraps user's onclick and Primefaces Ajax functions, placing each of them in a separate function, and sends them to Primefaces#bcn which executes the functions in order. The first one that returns false stops the processing of the remaining functions. The onclick in the generated HTML will be as follows:

onclick="PrimeFaces.bcn(this, event, [function(event){return confirm('confirm?')},function(event){PrimeFaces.ab({...});return false;}]);"

LeonardoHAlmeida · Answer 2 · 2016-09-12T20:37:52.657

2

You could use the <p:confirm> inside <p:menuitem> to do the confirmation.

EDIT: just remove the return before the confirm() and all should work as expected also.

edited Sep 12 '16 at 20:37

answered Sep 12 '16 at 20:29

LeonardoHAlmeida

339
2
4

Using `confirm()` without `return` does not resolve the problem. Instead, it submits the form even when the confirmation dialog is cancelled. I want to know if there is any workaround using `onclick` event before using `` – Radouane ROUFID Sep 13 '16 at 07:23
It's working here on PrimeFaces 6.0. It doesn't works when i use `return confirm(...);`. What's your menu ? `` ? – LeonardoHAlmeida Sep 13 '16 at 12:08
My menu is `` – Radouane ROUFID Sep 13 '16 at 12:55

Seraphstryfe · Answer 3 · 2016-09-13T08:09:19.350

0

You could try to delegate your <p:menuitem> actionListener into a <p:commandButton>. Then nest a <p:confirm> inside the <p:commandButton> for your confirmation message. Then trigger your command button via the onclick attribute of <p:menuitem>.

edited Sep 13 '16 at 08:09

answered Sep 13 '16 at 08:02

Seraphstryfe

46
4

score 0 · Answer 4 · answered Sep 13 '16 at 09:40

0

Using confirm() without return does not resolve the problem. Instead, it submits the form even when the confirmation dialog is cancelled. I want to know if there is any workaround using onclick event before using

You shall reset values on cancel button in the confirmation dialog or you shall fetch new data at page loading.

answered Sep 13 '16 at 09:40

Skyware

352
1
7
16

2

The confirmation dialog is a native JavaScript dialog which you can't fire an event on cancel button click. It seems like a bug in the PrimeFaces core. I have to create my own `` to workaround. – Radouane ROUFID Sep 13 '16 at 09:50

score 0 · Answer 5 · answered Sep 13 '16 at 12:03

Use a p:confirmDialog:

<p:menuitem icon="fa fa-fw fa-remove"
    title="#{message.global_remove}"
    value="#{message.global_remove}"
    onclick="PF('confirm').show();"/>

<p:confirmDialog widgetVar="confirm"
     message="#{message.component_list_confirm_deletion}">
    <p:commandButton value="Confirm"
            oncomplete="PF('confirm').hide();" update=":component_list"
            action="#{componentListMB.delete(cp.id)}" />
    <p:commandButton value="Cancel"
            onclick="PF('confirm').hide();" />  </p:confirmDialog>

Primefaces p:menuitem don't fire event when onclick event return true

5 Answers5