how get value from javascript

Vaadin 6 / 7 / 8
1

I have a code

@Route(value = "myview")
public class MyView extends VerticalLayout {

	public MyView() {
		Div div = new Div();
		div.setId("demo");
		
		UI.getCurrent().getPage().executeJavaScript("var x = document.getElementById(\"demo\");" + 
				"if (navigator.geolocation) {" + 
				"	navigator.geolocation.getCurrentPosition(showPosition);" + 
				"} else {" + 
				"	x.innerHTML = \"Geolocation is not supported by this browser.\";" + 
				"}" + 
				"function showPosition(position) {" + 
				"	x.setAttribute(\"lat\", position.coords.latitude);" + 
				"	x.setAttribute(\"lon\", position.coords.longitude);"
				"}");
		
		Button bt = new Button("get location");
		bt.addClickListener(e -> {
			System.out.println("latitude = " + d.getElement().getAttribute("lat"));
			System.out.println("longitude = " + d.getElement().getAttribute("lon"));
		}
	}
}

why when I click the button, the data (latitude, longitude) that I display on the console is null?
can the vaadin component not retrieve data from external javascript?
thank you

2

I recommend you to upgrade to Vaadin 14 (if you are using html imports and add-ons, use compatibility mode)

Check the new feature here: https://vaadin.com/releases/vaadin-14#js-return-values, i.e.

div.getElement().executeJs("return ...") // place some JavaScript here that returns the longitude, "this" will be reference to div element if needed
  .then(Integer.class, longitude -> {
      // do something with longitude here
});