Calling JSF managed bean method with arguments in jQuery

Question

I am using JSF to build a site. I have included jQuery Gritter (Growl) notification on my home page. Is it possible to call a managed bean method inside the before_clo

Answer 1

Your current attempt merely interprets the given EL expression as a value expression and just prints its result immediately during producing the HTML output with the JS code embedded. It's like as if you're using <h:outputText>. This is indeed not going to work.

The functional requirement is however understood. The standard JSF API does not offer a ready-to-use solution for this. If you want to stick to standard JSF API, your best bet is to create a hidden form with a hidden command link which you trigger using JavaScript.

Basically,

<h:form id="form" style="display:none">
    <h:inputHidden id="id" value="#{notificationBean.notificationID}" />
    <h:commandLink id="command" action="#{notificationBean.set0ToGrowlToShow}">
        <f:ajax execute="@form" />
    </h:commandLink>
</h:form>

with

$("[id='form:id']").val(#{p.notificationID});    
$("[id='form:command']").click();

However, this is pretty clumsy. Consider looking for a 3rd party JSF component or even utility library to achieve the requirement anyway. The JSF utility library OmniFaces has the <o:commandScript> component for this. See also its showcase page.

<h:form>
    <o:commandScript name="set0ToGrowlToShow" action="#{notificationBean.set0ToGrowlToShow}" />
</h:form>

with

set0ToGrowlToShow(#{p.notificationID});

(please note that this is set as HTTP request parameter, not as action method argument)

The JSF component library PrimeFaces has the <p:remoteCommand> for this which is much similar to <o:commandScript>. See also its showcase page. Even more, PrimeFaces has a ready-to-use <p:growl> component which does essentially the same as your jQuery plugin! See also its showcase page. Instead of your whole jQuery thing you can just do:

<p:growl globalOnly="true" autoUpdate="true" />

and feed it with messages by

facesContext.addMessage(null, message);

See also:

• How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
• How to pass JavaScript variables as parameters to JSF action method?

Answer 2

You need to understand that you need to call a java method that runs in the server and you CANNOT call it directly.

In your case, I would recommend to use AJAX or have the value read on load of the page and use it (if feasible for you)

Check how you can use AJAX with Jquery