5

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

4

2 回答 2

7

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

于 2013-09-22T20:39:52.897 回答
0

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

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

$(document).on('pfAjaxComplete', function() {
    foo.bar()
});
于 2014-08-20T15:55:31.223 回答