To simplify, just include the JS function call in the component that needs to be updated.
<h:form>
...
<h:commandButton value="submit"><f:ajax render="@form" /></h:commandButton>
<h:outputScript>someFunction();</h:outputScript>
</h:form>
This ensures it runs when the page loads and after ajax updates the form.
For the <f:ajax>, you can also utilize the onevent attribute.
<f:ajax ... onevent="handleAjax" />
with
function handleAjax(data) {
var status = data.status;
switch(status) {
case "begin":
// Executed before sending ajax request.
break;
case "complete":
// Executed after receiving ajax response.
break;
case "success":
// Executed after successful processing of response and DOM update.
someFunction();
break;
}
}
You can set a global hook using jsf.ajax.addOnEvent() to apply functionality to all ajax requests without specifying it for each onevent attribute of <f:ajax>.
jsf.ajax.addOnEvent(handleAjax);
Another option is to make use of the OmniFaces JSF utility library which provides <h:onloadScript> specifically designed for this purpose. It can be placed in the head section as desired.
<h:onloadScript>someFunction();</h:onloadScript>
This script will automatically run on every ajax request in the view, eliminating the need to duplicate it across multiple locations or specify its parent ID in every <f:ajax render>.