How is AJAX request handled in JSF 2.0?

Question

I was trying something like below --

<h:commandButton id="btnOK">
     <f:ajax event="action" execute="@this" render="idHeader"       
listener="#{myBean.actionSubmit()}"/>
</h:commandButton>

And I want when that ajax request completes, do some processing in the UI.I am using following jQuery code for that :

$(document).ajaxComplete(function() {
    $.modal.close();
});

But my problem is the jQuery method is not fired at all. I am wondering if JSF ajax submission fires the ajaxComplete event or not??

Answer 1

The standard JSF impl doesn't use jQuery API to send ajax requests. JSF uses its own internal API which you can find in the auto-included jsf.js file. So the jQuery jQuery.ajaxComplete() is never called. It would only be called when jQuery's $.ajax() (and its shortcuts $.get(), $.post(), etc) is being used. Only jQuery based component libraries use them such as PrimeFaces with <p:commandXxx> and <p:ajax>. For standard JSF <f:ajax>, you need to use JSF's own jsf.ajax.addOnEvent() handler instead, or the onevent attribute of the <f:ajax>.

In your particular case I think the onevent attribute is mose easy:

<f:ajax ... onevent="btnOKhandler" />

with

function btnOKhandler(data) {
    if (data.status == 'success') {
        $.modal.close();
    }
}

The data.status can have 3 values: begin, complete and success. See also tables 14-4 and 14-3 of the JSF specification.

See also:

• Javascript on (before and after) every Ajax-call

Answer 2

This is works for me instead $(document).ajaxComplete();

RichFaces.jQuery(document).on( 'ajaxcomplete', function(event, xhr, settings){   
     console.log(event, xhr, settings);
      // event, undefined, undefined
})