Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Issue with JQUERY based accordion Integration
Hi
Experts
Recently I have started working on Vaadin. So, please forgive my ignorance. I am trying to integrate an accordion which is written using HTML, JS (JQUERY) and CSS style sheet. When I open it directly on IE / Chrome, it perfectly works, the items gets open and close. But I am facing issue when trying to integrate the same code on Vaadin server.
1) I created one CustomLayout and put all the HTML script there and added the CustomLayout in UI.
<div id='acdcssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li class='last'><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</li>
<li class='active'><button><span>Home</span></button></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
2) Then I used @JavaScript annotation to send the JS (JQUERY) file at client side.
@com.vaadin.annotations.JavaScript({"http://code.jquery.com/jquery-latest.min.js","script.js");
code snippet of script.js
( function( $ ) {
$( document ).ready(function() {
$('#acdcssmenu > ul > li > a').click(function() {
$('#acdcssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#acdcssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
} )( jQuery );
3) Then I added css part in styles.scss
#acdcssmenu,
#acdcssmenu ul,
#acdcssmenu li,
#acdcssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;a
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#acdcssmenu > ul > li > a {
font-size: 14px;
display: block;
background: url(images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
#acdcssmenu > ul > li > button {
font-size: 14px;
display: block;
background: url(images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
........
.......
After starting the server I can see the JS file are copied at browser side. But when I click on the menu, nothing happens. However the layout and screens are perfectly OK.
After further debug I found that the click event instead of calling JQUERY / script.js rather calls below function which is a part of com.vaadin.DefaultWidgetSet-0.js
function qi(b){return function(){if(Xg()){return ri(b,this,arguments)}else{var a=ri(b,this,arguments);a!=null&&(a=a.val);return a}}}
If I open it directly on IE the click event actually calls below line of script.js (JQUERY) file and it works without any issue
$('#acdcssmenu > ul > li > a').click(function() {
I am not sure what is wrong here. Kindly suggest how to proceed.
Regards,
Vishal