3

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.

Xavi López
  • 27,550
  • 11
  • 97
  • 161
Olivier J.
  • 3,115
  • 11
  • 48
  • 71
  • Attributes of a component are declared and set at the server level, not at the client level. In other words, one does not submit a client side value to a server component attribute in this way. What is it that you are specifically trying to achieve because there is probably a better way to achieve it. – maple_shaft Dec 10 '12 at 14:42
  • thank you, yes I thought it... – Olivier J. Dec 10 '12 at 15:59

1 Answers1

6

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.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • thank you but I can not apply this (I think) because my 'foo' variable is dynamic and not known at HTML generation. Basically, it's the value of HTML select component (selectOneMenu). So thanks to onchange listener on this component remoteCommand is fired and I would like to know the value of this selectOneMenu in my backing bean. To summarize, I would like to do this : http://www.primefaces.org/showcase/ui/pprPartialTree.jsf but with remoteCommand but it doesn't work (it's look like there are many bugs according to forums...). So I wanted to do this via JS – Olivier J. Dec 10 '12 at 15:58
  • Then just go for the first mentioned approach? – BalusC Dec 10 '12 at 16:04
  • hmm I understood partially your mind. In fact I could do what I want with this "trick". Thank you again ! – Olivier J. Dec 10 '12 at 16:15