如何在PrimeFaces中的命令按钮上定义带有闭包的oncomplete事件

How do I define a oncomplete event on a CommandButton in PrimeFaces with a closure?

本文关键字：定义 闭包 事件 oncomplete 按钮 PrimeFaces 命令      更新时间：2023-09-26

我正在用一些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事件处理来替换基于属性的脚本？

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>本身就是此对象。这为您提供了将其进一步委托给所需处理程序的可能性，例如检查元素的类。

在PrimeFaces 4.0中，ajaxComplete被替换为pfAjaxComplete。有关更多详细信息，请参阅问题 5933。

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

$(document).on('pfAjaxComplete', function() {
    foo.bar()
});
相关文章：