Accessing Javascript variables from JSF

Mertugrul · 14 May 2019, 12:10

Hi,

I am trying to get user location latitude and longitude with geolocation and send the data to managed bean. My code can be seen below:

XHTML:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:p="http://java.sun.com/jsf/html">



<head>

    <title>Get Current Position</title>

    <script type="text/javascript">

        var watchId = false;

        function watchPosition() {
            if (navigator.geolocation) {

                watchId = navigator.geolocation.watchPosition(successPosition, failurePosition, {
                    enableHighAccuracy: false,
                    timeout: 1000,
                    maximumAge: 4000
                });
            } else
                document.getElementById("result").innerHTML = "Your browser does not support Geolocation API!!!";
        }

        function failurePosition(error) {
            alert("Error Code: " + error.code + " Error Message: " + error.message);
        }

        function stopWatching() {
            navigator.geolocation.clearWatch(watchId);
        }

        function successPosition(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            document.getElementById("result").innerHTML = "Latitude: " + lat + " Longitude: " + long;
            document.getElementById("latlngForm:lat").value = lat;
            document.getElementById("latlngForm:lng").value = lng;

            PF('lat').jq.val( lat );
            PF('lng').jq.val( lng );
        }
    </script>
</head>

<body>

<div id="result">


</div>

<p:button id="btnStartTracking" onclick="watchPosition();" value="Start Traking Location" />

<p:button id="btnStartTracking" onclick="stopWatching();" value="Stop Traking Location" />

<h:form id="latlngForm">
    <p:inputText id="lat" value="#{lntLngBean.lnt}" />
    <p:inputText id="lng" value="#{lntLngBean.lng}" />
</h:form>

#{lntLngBean.lnt}
#{lntLngBean.lng}

</body>

</html>

ManagedBean:

Code: Select all

package beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class LntLngBean {
    private double lnt = 0;
    private double lng = 0;

    public LntLngBean() {
    }

    public void submit(){
        System.out.println(lnt + "   " + lng);
    }

    public double getLnt() {
        return lnt;
    }

    public void setLnt(double lnt) {
        this.lnt = lnt;
    }

    public void lint(double lnt){
        setLnt(lnt);
    }

    public void longi(double lng){
        setLng(lng);
    }

    public double getLng() {
        return lng;
    }

    public void setLng(double lng) {
        this.lng = lng;
    }

    @Override
    public String toString() {
        return "LntLngBean{" +
                "lnt=" + lnt +
                ", lng=" + lng +
                '}';
    }
}

I know that geolocation javascript is working but Beans can not get the data.

I appreciate any help, thank you.

P.S.: I know there is a another topic with same title viewtopic.php?t=16475 the topic is old and it didn't helped me.

14 May 2019, 14:22

you can post values from JS via remoteCommand (AJAX). Just search a bit.

Mertugrul · 15 May 2019, 00:16

tandraschko wrote: ↑
14 May 2019, 14:22
you can post values from JS via remoteCommand (AJAX). Just search a bit.

Thank you for your reply.

I search remoteCommand and follow this tutorial https://www.primefaces.org/showcase-ext ... eParam.jsf

But couldn't make this code work. Do you mind looking it?

XHTML

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      >

<head>

    <title>Get Current Position</title>

    <script type="text/javascript">

        var watchId = false;
        var lat;
        var long;
        function watchPosition() {
            if (navigator.geolocation) {
                watchId = navigator.geolocation.watchPosition(successPosition, failurePosition, {
                    enableHighAccuracy: false,
                    timeout: 1000,
                    maximumAge: 4000
                });
            } else
                document.getElementById("result").innerHTML = "Your browser does not support Geolocation API!!!";
        }

        function failurePosition(error) {
            //alert("Error Code: " + error.code + " Error Message: " + error.message);
        }

        function stopWatching() {
            navigator.geolocation.clearWatch(watchId);
        }

        function successPosition(position) {
            lat = position.coords.latitude;
            long = position.coords.longitude;
            document.getElementById("results").innerText  = "Latitude: " + lat + " Longitude: " + long;
        }

    </script>
</head>

<body>

<button id="btnStartTracking" onclick="watchPosition();">Start Tracking Location</button>

<button id="btnStopTracking" onclick="stopWatching();">Stop Tracking Location</button>

<div id="results"></div>

<h:form id="latlngForm">

    <p:growl id="growl" showDetail="true" />

    <pe:remoteCommand id="applyDataCommand" name="applyData" process="@this" update="growl"
                      actionListener="#{lntLngBean.parametersAssigned()}">
        <pe:assignableParam name="lat" assignTo="#{lntLngBean.lnt}"/>
        <pe:assignableParam name="lng" assignTo="#{lntLngBean.lng}"/>
    </pe:remoteCommand>

    <h:outputLabel for="lat" value="Latitude: " />
    <h:outputText id="lati" value="#{lntLngBean.lnt}" />
    <br/>
    <h:outputLabel for="lng" value="Date: " />
    <h:outputText id="lngi" value="#{lntLngBean.lng}" />
    <br/>
    <br/><br/>

    <p:commandButton value="Apply Data" type="button" onclick="applyData(lat, long)" />

</h:form>
</body>
</html>

Managed Bean

Code: Select all

package beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import java.io.Serializable;

@ManagedBean
@SessionScoped
public class LntLngBean implements Serializable {
    private double lnt = 0;
    private double lng = 0;

    public void parametersAssigned() {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "ActionListener called",
                "Parameters assigned");

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public LntLngBean() {
    }

    public void submit(){
        System.out.println(lnt + "   " + lng);
    }

    public double getLnt() {
        return lnt;
    }

    public void setLnt(double lnt) {
        this.lnt = lnt;
    }

    public void lint(double lnt){
        setLnt(lnt);
    }

    public void longi(double lng){
        setLng(lng);
    }

    public double getLng() {
        return lng;
    }

    public void setLng(double lng) {
        this.lng = lng;
    }

    @Override
    public String toString() {
        return "LntLngBean{" +
                "lnt=" + lnt +
                ", lng=" + lng +
                '}';
    }

}

Accessing Javascript variables from JSF

Who is online