How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

I need to execute a JSF managed bean action method using ajax during HTML DOM load event, similar to jQuery's $(document).ready(function() { $.ajax(...) }). I can only use the JavaScript generated by JSF in this project. Is there a way to do it in native JSF? Which event can I use or which JSF ajax function can I use?

I'm using JSF 2.0, Facelets and PrimeFaces.

Answers:

Several ways.

Use <h:commandScript>. Note that this is only available since JSF 2.3.

<h:form>
    <h:commandScript name="commandName" action="#{bean.action}" render=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>

You can invoke it in JS as below:

commandName();

To invoke it during load event, set autorun="true".

<h:commandScript ... autorun="true" />

If you're using PrimeFaces, use its <p:remoteCommand>.
```
<h:form>
    <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
You can invoke it in JS as below:
```
commandName();
```
This however doesn't use JSF native jsf.ajax.request(), instead it uses PrimeFaces native jQuery (you know, PrimeFaces is a JSF component library on top of jQuery/UI).

To invoke it during load event, set autoRun="true".
```
<p:remoteCommand ... autoRun="true" />
```
If you're using OmniFaces, use its <o:commandScript>. The usage is exactly the same as with <h:commandScript> but then available for older JSF 2.x versions.

Simply replace h: by o: in the first example. Historical note: the <h:commandScript> is entirely based off <o:commandScript>.
Use the "hidden form" trick (actually, "hack" is given the ugliness a better wording).
```
<h:form id="form" style="display:none;">
    <h:commandButton id="button" action="#{bean.action}">
        <f:ajax render=":results" />
    </h:commandButton>
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
You can invoke it in JS as below:
```
document.getElementById("form:button").onclick();
```
Note the importance of triggering onclick() instead of click() in case of <h:commandButton>. The onclick() immediately invokes the onclick function while the click() only triggers the "click" event on the element, which is not supported in IE. If you were using a <h:commandLink>, you can safely use click() instead.

To invoke it during load event, consider putting it in <h:outputScript target="body">. The target="body" automatically puts the <script> in end of <body>, thus a $(document).ready() wrapper is unnecessary.
```
<h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>
```
Or, create a custom UIComponent which extends UICommand and generates the necessary JSF native jsf.ajax.request() call. As an example you could look at source code of OmniFaces <o:commandScript>.

How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

Answers:

Tags

Recent Questions

Top Questions