22

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?

3
  • 1
    Do you want to pass Global Positioning System (GPS) coordinates, longitude and latitude values from JavaScript to a corresponding backing bean? See.
    – Tiny
    Feb 18, 2015 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, 2015 at 19:15
  • I completely missed the comment.
    – Tiny
    Feb 18, 2015 at 19:20

3 Answers 3

31

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?

3
  • 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? Aug 9, 2016 at 15:39
  • 1
    See last paragraph.
    – BalusC
    Aug 9, 2016 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: blog.hatemalimam.com/intro-to-primefaces-widgetvar May 20, 2018 at 14:30
6

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}" />
0
-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>
3
  • 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, 2018 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. Jun 28, 2018 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 minimal reproducible example. If it works for you, there might be other non visible things that do the actual work.
    – Kukeltje
    Jun 28, 2018 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.