-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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
nice thanks costas
Asked: 2014-11-25 15:08:02 +0800
Seen: 89 times
Last updated: Nov 27 '14
zk.auSend not called on composer
How to stop combining commands in an ajax call ?
Font Awesome Problem with IE8 when security option "font download" is disabled
Send a client event with JSON data
How to capture the Browser Window Resize/Size Event
Toggled Popup - Close ONLY on toggling, not on focus lost
Verify existence -Verificar existencia DNI