JavaScript after Component is attached in DOM

Vaadin 6 / 7 / 8
1

Hello,

I need to execute some JavaScript after a component has been attached to the DOM. Is there an event I can listen to? Or a method to override?

Because the Components AttachEvent does not work, as this - as far as I can see it - does not tell that the component is attached to the dom but to the application.

Thanks you for your help!

2

While there is no Vaadin event as far as I know you could use a Javascript Observer in (e.g.) a Javascript Extension:

              var observer = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                    if (mutation.addedNodes) mutation.addedNodes
                    for (var i = 0; i < mutation.addedNodes.length; ++i) {
                          var node = mutation.addedNodes[i]
;
                      if(node.id==idWeAreLookingFor){
                          //Do something and then disconnect the observer because we got what we where looking for
                          observer.disconnect();
                      }
                    }
                  });
                });

                observer.observe(document.body, {
                    childList: true
                  , subtree: true
                  , attributes: false
                  , characterData: false
                });

I use it in one of my Extension. Before i start the Observer though i set the ID of the Vaadin component i’m looking for on the server-side with setId() and then transfer this ID to the Js client where i then check every new Element against this “idWeAreLookingFor”. As soon as i have the correct element i disconnect the observer.

3

The
SizeReporter
 addon may be usefull to set a listener for “onLoad” component event.

4

Thank you, the size reporter addon helps a lot!
It has a one time listener, this is exactly what I needed.