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.

Solution 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>

Solution 2

Depending on which version of Primefaces you're on you can use RequestContext.execute("{js here}");

From the Primefaces 3.4 documentation:

RequestContext provides a way to execute javascript when the ajax request completes, this approach is easier compared to passing callback params and execute conditional javascript. Example below hides the dialog when ajax request completes;

Code

public void save() {
  RequestContext requestContext = RequestContext.getCurrentInstance();  
  requestContext.execute("dialog.hide()");
}

Solution 3

Closest thing in Primefaces is;

http://www.primefaces.org/showcase/ui/callbackParams.jsf

Having said there is also an enhancement in 3.0;

http://code.google.com/p/primefaces/issues/detail?id=1342

Solution 4

You can't simply.

Managed Bean works on server and JavaScript on browser.

You can make conditionally invoke JavaScript depending on the value set in managedbean

Solution 5

In general, Java provides an API to evaluate a string using a scripting engine. This can be accomplished by javax.script.ScriptEngine and javax.script.ScriptEngineManager classes.

I am not entirely sure what your situation is, but if you can pass the javascript as a string to the managed bean, you could probably use Java scripting API to run the javascript on the server side.

For more information, check out this link: http://docs.oracle.com/javase/6/docs/technotes/guides/scripting/programmer_guide/index.html

View more solutions

Comments

[Maddy]

Hi, I have not understand what does mean by conditional invocation i.e how can i call javascript function and i found similar functionality in richfaces with JAVASCRIPTCONTEXT.......

[jmj]

You can make conditionally invoke JavaScript depending on the value set in managedbean By this statement I meant that , you can check for certain property of managed bean and then take decision to invoke js or not

[Maddy]

@Jigar Joshi I am new to JSF and even development, I want to know how to invoke js method, To do this is there any standard approch available in primefaces. assume that condition is met successfully in managedbean.

[jmj]

well in js function you can have if("#{someManagedBean.someFlag}"=='true'){//take action } ,

[Maddy]

Thankyou, Nikhil. I have fixed it in some other way. But its really good information

[Ced]

Will the omniface oncomplete work if the response header has a content security policy of no inline script ?

[BalusC]

@Ced: Yes (provided the header is only on ajax response). I'm only not seeing how that's related to the current question. For future off topic questions please press [Ask Question] button.