How to pass JavaScript variables as parameters to JSF action method?

Question

I'm preparing some variables in JavaScript (in my specific case, I'd like to get GPS location):

function getVars() {
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;
}

I'd like to send them to my managed bean via the below command button:

<h:commandButton value="submit" onclick="getVars()" action="#{bean.submit(x,y)}" />

public void submit(int x, int y) {
    // ...
}

How can I send x and y variables from JavaScript to JSF managed bean action method?

Do you want to pass Global Positioning System (GPS) coordinates, longitude and latitude values from JavaScript to a corresponding backing bean? [See](http://balusc.blogspot.in/2009/05/javajspjsf-and-javascript.html#PassVariablesFromClientSideToServerSide). — Tiny, Feb 18 '15 at 19:00
@Tiny Thx for ur example. it's nice article. But i have a question is the URL, Is the URL equal the XHTML path? — Bubble, Feb 18 '15 at 19:15

score 32 · Accepted Answer · edited May 23 '17 at 12:31

32

Let JS set them as hidden input values in the same form.

<h:form id="formId">
    <h:inputHidden id="x" value="#{bean.x}" />
    <h:inputHidden id="y" value="#{bean.y}" />
    <h:commandButton value="submit" onclick="getVars()" action="#{bean.submit}" />
</h:form>

function getVars() {
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;

    document.getElementById("formId:x").value = x;
    document.getElementById("formId:y").value = y;
}

The command button action method could just access them as bean properties the usual way.

private int x;
private int y;

public void submit() {
    System.out.println("x: " + x);
    System.out.println("y: " + y);
    // ...
}

// Getters+setters.

An alternative is to use OmniFaces <o:commandScript> or PrimeFaces <p:remoteCommand> instead of <h:commandButton>. See also a.o. How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

edited May 23 '17 at 12:31

Community

1
1

answered Feb 19 '15 at 08:12

BalusC

1,082,665
372
3,610
3,555

1

What if you want to call a backing bean method from JS itself as #{bean.foo()}? Can you put a JS var inside the parenthesis? – Javier Cabero Aug 09 '16 at 15:39
1

See last paragraph. – BalusC Aug 09 '16 at 18:16
If using PrimeFaces, I think it is better practice to use the javascript API PrimeFaces.widgets['widget_myInputTextId'] to manipulate the objects. As explained for example here: http://blog.hatemalimam.com/intro-to-primefaces-widgetvar/ – Jose Manuel Gomez Alvarez May 20 '18 at 14:30

score 6 · Answer 2 · edited Sep 26 '19 at 16:18

If you use PrimeFaces, you can use a hidden input field linked to a managed bean, and you can initialize its value using javascript, for PrimeFaces, the PF function can be used to access a widget variable linked to the hidden input, in this way:

<script type="text/javascript">
function getVars() {
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;
    PF('wvx').jq.val( lat1 );
    PF('wvy').jq.val( lng1 );
}
</script>

<p:inputText type="hidden" widgetVar="wvx" value="#{bean.x}" />
<p:inputText type="hidden" widgetVar="wvy" value="#{bean.y}" />

jonathan gonzalez · Answer 3 · 2018-06-28T16:24:13.530

-4

<h:form id="formId">
<h:inputHidden id="x" value="#{bean.x}" />
<h:inputHidden id="y" value="#{bean.y}" />
<h:commandButton value="submit" onclick="getVars()" action="#{bean.submit}" />

 <script>
        function getVars() {

            var x; 
            var yt;

            x=#{bean.x};
            y=#{bean.y};
        }
    </script>

edited Jun 28 '18 at 16:24

answered Jun 27 '18 at 13:10

jonathan gonzalez

21
5

2

This is not a solution... The javascript is evaluated rendering time and it will not be an assignment that takes place when 'getVars() is called (clicking on the button)... Bad 'answer'... (did you actually try it?) – Kukeltje Jun 27 '18 at 13:30
Actually, it works for me correctly, I have no problem using it in this way. as long as the javascript is within the same xhtml. – jonathan gonzalez Jun 28 '18 at 13:45
No, it cannot work... Sorry. The `#{bean.x}` server side will NEVER be assigned the value of x via this piece of javascript (look at what the source client-side shows). Sorry plain wrong (others agree considering the downvotes). The only way you can convince me is to make a real [mcve]. If it works for you, there might be other non visible things that do the actual work. – Kukeltje Jun 28 '18 at 13:58

How to pass JavaScript variables as parameters to JSF action method?

3 Answers3

Linked

Related