We have developed a vaadin 7 application. We are trying to use Jquery Slider Panel.
One of tabPage which has jQuery Slider panel doesn’t show slider.
I added 2 example projects. One of them is working. It doesn’t contain tabsheet. Its name is vaadinCustomLayout.
Jquery Slider Panel working in vaadinCustomLayout project but when we add slider page to tabSheet it’s not working properly.
JavaScript component cause the problem.
After clicking the tab page, client side page doesn’t load completely.
But document.onReady method in javascipt file works which is contained in the component.
How can we solve this problem.
additionally , if you call JavaScript.getCurrent().execute it will show slider but when you press browser refresh (f5) key the current page it doesn’t show slider 13145.zip (136 KB)
First of all, you shouldn’t ever use
$(document).ready() function with Vaadin because it will be triggered in the wrong place. The initiation of the connector can be considered to be the same thing: it is called when the ‘surroundings’ are ready for the component.
Then to your problem. It is actually a bug in TabSheet that causes this since it initiates the components before the DOM structure has actually been created. There’s a ticket about the issue:
http://dev.vaadin.com/ticket/12944
Until the bug has been fixed, there’s a simple workaround. You can defer the initiation of the component until everything else has been loaded. This is done by calling
setTimeout(function() {
//init your component here
}, 0);
in your connector. I’ve attached a fixed version of your project, I hope that this example will help also others who are having the same problem. 13312.zip (80.7 KB)