如何使用闭包在 PrimeFaces 中的 CommandButton 上定义 oncomplete 事件？答案

【问题标题】：How do I define a oncomplete event on a CommandButton in PrimeFaces with a closure?如何使用闭包在 PrimeFaces 中的 CommandButton 上定义 oncomplete 事件？
【发布时间】：2013-09-27 01:26:24
【问题描述】：

我正在使用一些 JavaScript 交互性扩展 PrimeFaces 应用程序的一部分。这一切都从CommandButton 开始，它从bean 中获取一些数据，然后调用JavaScript。目前，它看起来像这样：

<p:commandButton actionListener="#{myBean.doSomething}"
                                 oncomplete="doSomethingSimple()"
                                 value="Do something" />

当然，这是非常简单的基于函数的编程。没有上下文，没有闭包，没有 OOP（如果我需要的话）。我想将一个普通的 JavaScript 事件附加到 CommandButton，例如像这样使用 jQuery：

$('.myCommandButton').on('complete', function () {
     ...
})

但是，complete 不是 DOM 事件，基本上只有 PrimeFaces 知道何时调用它。还有没有办法用“普通”的 JavaScript 事件处理来代替基于属性的脚本？

【问题讨论】：

如果你能找到传递源元素 id（或其他东西）的方法，你可以使用 <p:ajaxStatus primefaces.org/showcase/ui/… ，就像使用 JSF jsf.ajax.addOnEvent 的方式一样

标签： javascript jquery jsf primefaces

【解决方案1】：

PrimeFaces 使用 jQuery 来处理 ajax 请求。所以，可以挂钩通用的$.ajaxComplete() 处理程序。源可用作第三个参数options 的属性：

$(document).ajaxComplete(function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

或者，如果您使用的是 PrimeFaces 4.0 或更高版本，请挂上 PrimeFaces 特定的 pfAjaxComplete 事件：

$(document).on("pfAjaxComplete", function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

或者，如果您将 PrimeFaces 与“普通”HTML/jQuery 混合并希望同时应用：

$(document).on("ajaxComplete pfAjaxComplete", function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

无论如何，$source 表示触发 ajax 操作的原始 HTML DOM 元素的 jQuery 对象，在此特定示例中为 <p:commandButton> 本身。这为您提供了将其进一步委托给所需处理程序的可能性，例如检查元素的类。

【讨论】：

【解决方案2】：

在 PrimeFaces 4.0 中，ajaxComplete 被替换为 pfAjaxComplete。详情请见Issue 5933。

话虽如此，我能够让它按如下方式工作：

$(document).on('pfAjaxComplete', function() {
    foo.bar()
});

【讨论】：