当onclick事件返回true时，Primefaces p：menuitem不会触发事件

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

Answer 1

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. Eg

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;}]);"

Answer 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.

Answer 3

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> .

Answer 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

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

Answer 5

Use ap: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>