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

  1. Home
  2. javascript
  3. 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.

First answer

Several ways.

  1. 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" />
    

  2. 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" />
    

  3. 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>.


  4. 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>
    

  5. 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>.

Second answer

Third answer

Reprint:https://stackoverflow.com/questions/16588327/how-to-invoke-a-jsf-managed-bean-on-a-html-dom-event-using-native-javascript
Spread the love

Related articles

Comments are closed.