Primefaces p：menuitem 在 onclick 事件返回 true 时不触发事件

Question

我使用PrimeFaces p:menuitem组件执行删除。为了添加确认步骤，我使用了onclick事件，其中显示了一个JavaScript确认对话框。在我的代码下面:

<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" />

当用户确认删除时不触发该操作，而是在URL末尾添加#。

为什么事件没有被触发，而在p:commandButton一切工作正常?

---

我用的是:

JSF 2.1.7
• Primefaces 6.0

Answer 1

当用户确认删除时，不会触发该操作，而是在URL的末尾添加#。

Primefaces实际上是将p:menuitem呈现为a HTML标记，使用元素的onclick事件来执行它自己的Ajax请求。例如

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

请注意，他们在a元素的which prevents the default browser behaviour末尾添加了return false;，因此URL中不会出现#。

当您添加confirm函数时，它被放置在onclick元素的开头，如下所示:

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

如果你不确认它，没有#将出现在URL中，因为默认行为被阻止了。如果你确认了，它就会出现。但是Ajax操作将永远不会被执行，因为您首先调用的是return语句。

您可以通过以下方式更改p:menuitem的onclick事件来实现预期的行为:

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

为什么事件没有被触发，而在p:commandButton一切工作正常?

Primefaces对p:commandButton的处理是不同的。它包装了用户的onclick和Primefaces Ajax函数，将它们分别放在一个单独的函数中，并将它们发送给按顺序执行函数的Primefaces#bcn。第一个返回false的函数停止其余函数的处理。生成的HTML中的onclick如下:

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

Answer 2

您可以使用<p:menuitem>中的<p:confirm>来进行确认。

EDIT:只要在confirm()之前删除return，所有的工作也应该如预期的那样。

Answer 3

您可以尝试将<p:menuitem> actionListener委托给<p:commandButton>。然后在<p:commandButton>中嵌套一个<p:confirm>作为确认消息。然后通过<p:menuitem>的onclick属性触发命令按钮。

Answer 4

使用confirm()而不返回并不能解决问题。相反，即使取消了确认对话框，它也会提交表单。我想知道在使用

之前是否有任何使用onclick事件的解决方案

您应该在确认对话框中重置取消按钮的值，或者您应该在页面加载时获取新数据。

Answer 5

使用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>