How can I ensure my js file runs after the dom is loaded?

Flow
1

In the picture below I show what I have in my example. Whenever I used the @Javascript tag then my js file will run and then load the dom (I want the reverse).

I have tried to add the file as a javascript file and as a jsmodule to which I get a NoSuchElementException:"No Value Present (see image below). I have also tried executing the js file rather than adding it using the same url as I would with @JavaScript, only to have a file not found error within chrome’s developer tools.

Is this a bug in v14 or does the url need to be changed? or maybe is there a different way to add the js after the dom loads? Thankyou.

*EDIT: I believe I found one possible fix, instead of the below code, use:

		UI.getCurrent().getPage().executeJs("alert($0)", "works");

However, does there exist a way to add in a js file and not just an expression after loading in the dom?

17784647.png
17784650.png

2

Hi Bader. First of all, the NoSuchElementException is caused by the fact that there is no UI available in the constructor (this is why the Optional is returned for…). You should move the call to onAttach method instead, which you can override. It is triggered when the component has been actually added to the UI.

For adding JS in a file and executing something from it, I recommend you read the [tutorial about calling JS from Java]
(https://vaadin.com/tutorials/calling-java-from-javascript#_calling_javascript). Note the comments at the end of the tutorial for the changes in Vaadin 14 (the tutorial will be updated soon).