Question

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

Answer 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>本身。这使您可以通过例如将其进一步委托给所需的处理程序。检查元素的类。

Answer 2

使用PrimeFaces 4.0，ajaxComplete已替换为pfAjaxComplete。有关详细信息，请参阅Issue 5933。

话虽如此，我能够按照以下方式开展工作：

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

如何在PrimeFaces中使用闭包在CommandButton上定义一个oncomplete事件？

2 个答案: