How to re-execute javascript function after form reRender?

Simplest way is to just put the JS function call in the to-be-updated component itself.

    <h:commandButton value="submit"><f:ajax render="@form" /></h:commandButton>

This way it’s executed as the page loads and also if the form get updated by ajax.

As to the <f:ajax> itself, you could also use its onevent attribute.

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


function handleAjax(data) {
    var status = data.status;

    switch(status) {
        case "begin":
            // This is invoked right before ajax request is sent.

        case "complete":
            // This is invoked right after ajax response is returned.

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.

You could add a global hook by jsf.ajax.addOnEvent() so that you don’t need to specify it in every single onevent attribute of <f:ajax> if the functional requirement applies to every ajax request.


An alternative is to use the OmniFaces JSF utility library which offers the <h:onloadScript> for exactly this purpose. You can place it in the head so you want.


This is automatically re-excuted on every single ajax request on the view so that you don’t need to copy it over multiple individual places in the view which can be ajax-updated, or to repeat its parent ID in every <f:ajax render>.

Leave a Comment