Using JQuery to interact with vaadin Components

General
1

I want to use JQuery animations and events inside my vaadin project.

I somehow managed to import jquery inside my application by overriding
writeAjaxPageHtmlHeader
 method in my custom ApplicationContext Class.

But when I tried to access some components through JQuery inside this method, for eg. I used,


String query = “<script type="text/JavaScript">” + “$(document).ready(function() {” + “console.log($(‘.mydiv’).html())” + “});” + “”;
page.append(query);

Then I ran my project and used firebug to capture the value. But what I got is,


null prinet (line 4)
POST http://localhost:8080/prinet/UIDL?repaintAll=1&s…=0&dston=false&curdate=1343895235833&wsver=6.7.8 200 OK 87ms 4628B…he.html (line 2980)

But when I run the same JQuery command from firebug console after application was loaded, it works perfectly.

From this what I understand is that my JQuery is executed before the ui component got created. Am I right at this?

If so, then I want to know how I can make the JQuery to execute after all my ui components got created.

ie., is there any event in vaadin equivalent to
CreationComplete
 Event in Flex

I would highly appreciate a help. I badly need it.

2

jQuery’s $(document).ready()-function gets executed as soon as the DOM of the Document is fully loaded. At that point in time, the Vaadin-components are not there yet, as they get created by an equal functionality per Javascript and will be executed in the DOM after the host-document (that is the one jQuery listens to) has been loaded. So this event is not useful here.

I don’t know how one could handle this … but maybe it is enough to “inject” the jQuery-code using "Window.executeJavascript() or even a Label with Content-type XHTML at the very end of Application.init(). Looks like a pretty ugly hack to me, but might be working. Maybe you give it a try.