Question

How can I pass JS value to attribute nested tag inside component?

I have this code:

<p:remoteCommand .....>
    <f:attribute name="galaxie" value="jstest()" />
</p:remoteCommand>

And my simple JS jstest function :

function jstest(){
    return "foo";
}

When I test attribute value for galaxie in backing bean I have jstest() not foo.

Answer 1

The <f:attribute> is a JSF tag which runs in the webserver during producing HTML code. JavaScript is a client side language which doesn’t run in webserver, but runs in the webbrowser after it has retrieved all the JSF-produced HTML code. Yet you seem to expect that they run “in sync”. This is thus not true.

To achieve what you’ve had in mind, you basically need to provide <h:inputHidden> which is bound to a bean property and let JS fill it before the remote command request is been fired.

E.g.

<h:form id="form">
    <h:inputHidden id="galaxie" value="#{bean.galaxie}" />
    <p:remoteCommand ... onstart="$('#form\\:galaxie').val(jstest())" process="@form" ... />
</h:form>

Alternatively, much easier is to just pass it as remote command function argument which accepts a JS object representing the request parameter map. Given a

<h:form>
    <p:remoteCommand name="foo" ... />
</h:form>

you could just do:

foo({ galaxie: jstest() });

You can collect it by @ManagedProperty or ExternalContext#getRequestParameterMap().

---

Update: since PrimeFaces 3.3, the syntax for parameters in <p:remoteCommand> function has changed. If you’re using at least PrimeFaces 3.3, then the function call should look like this:

foo([{ name: 'galaxie', value: jstest() }]);

See also Pass parameter to p:remoteCommand from JavaScript.