Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
nice thanks costas
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
Asked: 2014-11-25 15:08:02 +0800
Seen: 89 times
Last updated: Nov 27 '14