Execute JavaScript after every JSF ajax postback Execute JavaScript after every JSF ajax postback ajax ajax

Execute JavaScript after every JSF ajax postback


You could register it as JSF ajax callback handler by jsf.ajax.addOnEvent:

<script>    jsf.ajax.addOnEvent(foo);</script>

with

<script>    function foo(data) {        var ajaxStatus = data.status; // Can be "begin", "complete" and "success".        switch (ajaxStatus) {            case "begin": // Right before sending ajax request.                // ...                break;                        case "complete": // Right after receiving ajax response.                // ...                break;            case "success": // When ajax response is successfully processed.                // ...                break;        }    }</script>

where the data object has several useful XHR derived properties which is described in table 14-4 of JSF 2.0 specification (click the For Evaluation link). Here's an extract of relevance:

TABLE 14-4 Event Data Payload

    Name           Description/Value    -------------  ----------------------------------------------------    type           “event”    status         One of the events specified in TABLE 14-3    source         The DOM element that triggered the Ajax request.    responseCode   Ajax request object ‘status’ (XMLHttpRequest.status);                    Not present for “begin” event;    responseXML    The XML response (XMLHttpRequest.responseXML);                    Not present for “begin” event;    responseText   The text response (XMLHttpResponse.responseTxt);                   Not present for “begin” event;

As an alternative, a XHTML-declarative way would be to just embed the script call in a JSF component with an id and let the ajax call re-render it. The component should in turn render the script conditionally based on FacesContext#isPostback().

<h:form>    <h:commandButton value="Submit" action="#{bean.submit}">        <f:ajax render=":myscript">    </h:commandButton></h:form><h:panelGroup id="myscript">    <h:outputScript rendered="#{facesContext.postback}">foo();</h:outputScript></h:panelGroup>

Most component libraries have however better abstracted support for this. Since you didn't mention which one you're using so that a more suited answer can be given, here's just a random example based on PrimeFaces command button.

<p:commandButton value="Submit" action="#{bean.submit}" oncomplete="foo();" />

Refer the documentation of the component library you're using.

See also: