Calling a JavaScript function from managed bean

Question

Is there a way to call (execute) a JavaScript function from managed bean in JSF?

If that's relevant, I'm also using PrimeFaces.

Answer 1

PrimeFaces 6.2+

Use PrimeFaces#executeScript():

public void submit() {
    // ...
    PrimeFaces.current().executeScript("alert('peek-a-boo');");
}

NOTE: works only when submit() is invoked by Ajax.

PrimeFaces 6.2-

Use RequestContext#execute():

public void submit() {
    // ...
    RequestContext.getCurrentInstance().execute("alert('peek-a-boo');");
}

NOTE: works only when submit() is invoked by Ajax.

JSF 2.3+

Use PartialViewContext#getEvalScripts():

public void submit() {
    // ...
    FacesContext.getCurrentInstance().getPartialViewContext().getEvalScripts().add("alert('peek-a-boo');");
}

NOTE: works only when submit() is invoked by Ajax.

OmniFaces

Use Ajax#oncomplete().

public void submit() {
    // ...
    Ajax.oncomplete("alert('peek-a-boo');");
}

NOTE: works only when submit() is invoked by Ajax.

JSF 2.2-

Best what you can do is to set the desired script as a bean property and conditionally render a <h:outputScript> component when the bean property is not empty.

<h:commandButton ... action="#{bean.submit}" />
<h:outputScript rendered="#{not empty bean.script}">#{bean.script}</h:outputScript>

public void submit() {
    // ...
    script = "alert('peek-a-boo');";
}

In case you're submitting the form by Ajax, don't forget to wrap the <h:outputScript> in another component and ajax-update it instead. See also Ajax update/render does not work on a component which has rendered attribute.

<h:commandButton ... action="#{bean.submit}">
    <f:ajax execute="@form" render="script" />
</h:commandButton>
<h:panelGroup id="script">
    <h:outputScript rendered="#{not empty bean.script}">#{bean.script}</h:outputScript>
</h:panelGroup>