0

How to send JSON data with client event?

asked 2014-11-25 15:08:02 +0800

Neus gravatar image Neus
1415 14

Hi, I'm implementing a function in Javascript to get the geolocation with HTML5. When I obtain the result I'm trying to send the data to server. In Chrome it works perfect but in Firefox and IE the data is not sent. This is my code:

Server side:

public void onClick$btnGeolocaliza(){
    Clients.evalJavaScript("getGeolocalizacion('"+btnGeolocaliza.getUuid()+"');");
}

Client side:

function getGeolocalizacion(uuid){
    var highAccuracy = false;
    navigator.geolocation.getCurrentPosition(function(position){
        console.log("se ha podido geolocalizar");
        zAu.send(new zk.Event(zk.Widget.$(uuid), 'onGetGeolocalizacion', position));
    }, function(err){
        console.warn("Error al intentar obtener la geolocalización (" + err.code + "):" + err.message);
    },{timeout:60000, enableHighAccuracy: highAccuracy});
}

Server side reciving event:

public void onGetGeolocalizacion$btnGeolocaliza(ForwardEvent event){
    if(event.getOrigin().getData()!=null){
        //El evento tiene los datos de geolocalización
        JSONObject posicion = (JSONObject) event.getOrigin().getData();
        System.out.println("Posicion: " + posicion.toJSONString());
        if(posicion.get("coords")!=null){
            //Los datos de geolocalización tienen las coordenadas
            JSONObject coords = (JSONObject) posicion.get("coords");
            if(coords.get("latitude")!=null){
                //Latitud
                System.out.println("Latitud: " + coords.get("latitude").toString());
            }
            //Siempre que llega una latitud llega una longitud pero por seguridad lo comprobamos
            if(coords.get("longitude")!=null){
                //Longitud
                System.out.println("Longitud: " + coords.get("longitude").toString());
            }
            //La altitud no llega siempre, depende del dispositivo
            if(coords.get("altitude")!=null){
                //Altitud
                System.out.println("Altitud: " + coords.get("altitude").toString());
            }
        }
    }
}

In Chrome I recive the JSONObject on the server and I can obtain the coords. In firefox and IE I recive null.

I have to do something different? Why is it working different between browsers?? I tried to send an String and it works ok in all browsers

delete flag offensive retag edit

2 Answers

Sort by » oldest newest most voted
1

answered 2014-11-27 15:42:23 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-11-27 15:51:03 +0800

Confirmed. The json geolocation object is null when it is passed from Firefox. In Chrome works fine. I am not sure if this is an issue related to ZK or to some sort of security/privacy settings of the browser.

The workaround i found is to re-package the location coordinates on client-side inside a new JSON object and then send this new object to the server. Here is a complete example demonstrating both chrome and firefox:

<?page title="Json Geo" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="winMain" title="Json Geo" border="none" 
        xmlns:n="native" xmlns:w="client" 
        apply="snippets.json.GeolocationController">

    <vlayout>
        <hlayout valign="middle">
            Resolve Geolocation
            <button label="Chrome" w:onClick="sendGeolocationFromChrome();" />
            <button label="Firefox" w:onClick="sendGeolocationFromFirefox();" />
        </hlayout>
        <hlayout valign="middle">
            Your location: latitude<textbox id="txtLat" />, longitude<textbox id="txtLon" />  
        </hlayout>
    </vlayout>

</window>

<script type="text/javascript"><![CDATA[

    function sendGeolocationFromChrome() {
        navigator.geolocation.getCurrentPosition(function(position) {
            zAu.send(new zk.Event(zk.Widget.$('$winMain'), 'onSendLocationFromChrome', position));
        });
    }

    function sendGeolocationFromFirefox() {
        navigator.geolocation.getCurrentPosition(function(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            var jsonObject = {coords: {latitude: lat, longitude: lon}};
            zAu.send(new zk.Event(zk.Widget.$('$winMain'), 'onSendLocationFromFirefox', jsonObject));
        });
    }

]]></script>

</zk>

And a simple controller with two event handlers, one for Chrome and one for Firefox:

import org.zkoss.json.JSONObject;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Textbox;

public class GeolocationController extends SelectorComposer<Component> {

    private static final long serialVersionUID = 1L;

    @Wire private Textbox txtLat;
    @Wire private Textbox txtLon;

    @Listen("onSendLocationFromChrome = window")
    public void onSendLocationFromChrome(Event e) {
        JSONObject geolocation = (JSONObject) e.getData();
        JSONObject coords = (JSONObject) geolocation.get("coords");
        Double lat = (Double)coords.get("latitude");
        Double lon = (Double)coords.get("longitude");
        txtLat.setValue(lat.toString());
        txtLon.setValue(lon.toString());
    }

    @Listen("onSendLocationFromFirefox = window")
    public void onSendLocationFromFirefox(Event e) {
        JSONObject geolocation = (JSONObject) e.getData();
        JSONObject coords = (JSONObject) geolocation.get("coords");
        Double lat = (Double)coords.get("latitude");
        Double lon = (Double)coords.get("longitude");
        txtLat.setValue(lat.toString());
        txtLon.setValue(lon.toString());
    }
}

Tested with Chrome 39.0.2171.71 and Firefox 33.1.1. It doesn't work with IE 8. I didn't test it with IE 9/10.

Hope that helps

Costas

link publish delete flag offensive edit
0

answered 2014-11-27 21:04:27 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

nice thanks costas

link publish delete flag offensive edit

Comments

You are welcome Stephan

cyiannoulis ( 2014-11-28 10:26:05 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-11-25 15:08:02 +0800

Seen: 82 times

Last updated: Nov 27 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More