Executing JavaScript on subwindow components

General
1

Hi,

I am trying to open a sub window and execute some Javascript on a subwindows component.

(In the subwindow i want to show a google map created using java script api v3, since the vaadin google maps add-on does not fulfil my needs)

  1. I create the google maps component in the sub window by

String jsGmapsXhtml =  "<div id='jsGmaps'>jsGmaps</div>";
Label jsGmaps = new Label(jsGmapsXhtml,Label.CONTENT_XHTML);
  1. i open the subwindow by

getApplication().getMainWindow().addWindow(gMapsWindow);
  1. after this i execute some javascript on the div

getApplication().getMainWindow().executeJavaScript("createGoogleMaps(document.getElementById('jsGmaps'))");

The
problem
 is that the div element is not existing or created just after the subwindow is shown. But the javascript is executed immediatly.
As a result document.getElementById(‘jsGmaps’) return null and the google maps is not beeing created.

Is there a way wait until a component is visible or loaded, by adding a listener or something?

Thank you in advance!!!

2

There are other ways, I’m sure, and I’m not totally sure this will work - but if it does, it’s a pretty quick minor modification to what you’re already doing:
You might be able to get away with just wrapping your javascript code in a setTimeout(,0) - using 0 for the timeout causes it to execute immediately when the current ‘thread’ (i.e rendering) is done.

Worth a shot, maybe?

Best Regards,
Marc

3

You could wait for the div to be in the DOM like this :


function waitForMyDiv(){
  if(document.getElementById('jsGmaps'){
    createMap();
  }else{
    setTimeout(waitForMyDiv, 100);
  }
}
setTimeout(waitForMyDiv,0);

This will check if there is something called ‘jsGmaps’ in the DOM tree. It there is, createMap() will be run otherwise it will try again in 100ms.
The “setTimeout(waitForMyDiv,0);” means “start after the current rendering pass is finished”, there is not much point in trying before (and may crash the DOM in IE…)