How to detect incomplete event in CommandButton in PrimeFaces with closing?

Question

I am extending part of the PrimeFaces application with some JavaScript interactivity. It all starts with a CommandButton , which receives some data from a bean and invokes JavaScript. Currently, it looks something like this:

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

Naturally, this is a very simple function-based programming. There is no context, no closures, no OOP (if I needed it). I would like to add a normal JavaScript event to CommandButton , for example. for example using jQuery:

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

However, complete not a DOM event, and basically, only PrimeFaces knows when it will be called. Is there a way to replace attribute-based scripts with "normal" JavaScript event handling?

Answer 1

PrimeFaces uses jQuery under covers to handle ajax requests. That way, you can simply plug in a generic $.ajaxComplete() handler. The source is available as a property of the 3rd argument of options :

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

Or, if you are using PrimeFaces 4.0 or later, connect to the pfAjaxComplete event for PrimeFaces:

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

Or, if you mix PrimeFaces with "plain" HTML / jQuery and would like to apply on both:

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

Regardless of the method, $source is the jQuery object of the original HTML DOM element on which the ajax action was run, which in this particular example is <p:commandButton> . This gives you the opportunity to delegate it to an additionally desired handler, for example. learning an element class.

Answer 2

With PrimeFaces 4.0, ajaxComplete been replaced with pfAjaxComplete . See Problem 5933 for more details.

Thus, I was able to get it to work as follows:

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