How Can I Call JSF Managed Beans from HTML DOM Events Using JavaScript?

Invoking JSF Managed Beans from HTML DOM Events Using Native JavaScript

Using JSF's generated JavaScript, you can execute managed bean actions in response to HTML DOM events, similar to jQuery's document.ready event.

Options to Invoke Managed Bean Actions:

1. h:commandScript (JSF 2.3 )

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

<h:panelGroup>

JavaScript Invocation:

commandName(); // Invoke the action method

2. p:remoteCommand (PrimeFaces)

<h:form>
    <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" />
</h:form>

<h:panelGroup>

JavaScript Invocation:

commandName(); // Invoke the action method

3. o:commandScript (OmniFaces - Available in Older JSF Versions)**

Replace h: by o: in the h:commandScript example.

4. Hidden Form Trick

<h:form>

JavaScript Invocation:

document.getElementById("form:button").onclick(); // Trigger the button click

5. Custom UIComponent

Extend UICommand and generate the jsf.ajax.request() call in the custom component.

DOM Event Invocation:

To invoke the managed bean action on DOM load, use JS to trigger the event on the client-side. For example, with the h:commandScript method:

$(function () {
    commandName();
});

With the hidden form trick, place the JavaScript invocation within an h:outputScript with target="body":

<h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>

The above is the detailed content of How Can I Call JSF Managed Beans from HTML DOM Events Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!