Errai UI DOM Access & JS Execution Failures ?

[chaluwa]

Like in the errai-tutorial demo, the JS files in my project were included in the index.html file that loads the GWT app, including an app.js JS file that creates drop-down menus (and other twitter bootstrap / jquery plugins). This app.js file uses JQuery to augment the page / DOM and previewing the HTML templates in browser shows that everything works.

However, when the errai app runs and we go to one of the @Template @Page, some of the JS effects / augmentation are not applied. My guess is that the errai @Template @Page components have not been rendered at that time. How can this be handled?

Is there a life-cycle method (like @PostConstruct) that gets executed when a @Page has is fully rendered. If there is, then I can call a JSNI method to execute the needed JS. I can also make calls at this point, to mutate the DOM if I so desire.

[mbarkley]

Charles,

There are lifecycle methods for loading a page. You can annotate methods in a page with @PageShowing and @PageShown to have them invoked while the page is loading, and when it's done loading, respectively.

Cheers.

[chaluwa]

Ok. Thanks. I can now call / execute JS from within @PageShown, but these can only be simple blocks of JS code. The real problem is that the app does not benefit libraries (e.g Twitter Bootstrap) which gets loaded with the index.html file. So a <select class="selectpicker"> in the template html of a errai @Page that wold have been tweaked by Bootstrap 3 (or some other aditional JS library), does not even even get displayed in my app.

[edewit]

Do you have them in the head of the document? Try putting them at the bottom ( just before </body> ) then they load at a later time and it could fix your timing problems

[chaluwa]

Well, they are already just before </body> in the app's index.html file. Am thinking a way to look at this would be to see if these JS libraries / plugins have initializers / triggers that can be invoked from JSNI that can do the same thing as loading them with already-present HTML markup.

[edewit]

there is also a project called gwt-bootstrap maybe they have a solution for this.

[chaluwa]

Yes, am aware of that project, used it before but not with Errai UI. I also noticed that these issues only come up in dev mode. Once the app is compiled and deployed, everything kinda works well. So the fact / issue is that, in dev mode, the @Template / @Page markup loads much after the JS libraries.