Hey, I am new to Vaadin and I am having some difficulty adding some client-side javascript, the weird part is everything works when I add an alert() and breaks when I take it away.
init is the Vaadin component and the label search contains an HTML table of the data I want to search using list.js
Label search = new Label(searchIdentity(),ContentMode.HTML);
Label message = new Label("MessageBox",ContentMode.HTML);
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
String script = "try{var fileref=document.createElement('script');";
script += "fileref.setAttribute(\"type\",\"text/javascript\");";
script += "fileref.setAttribute(\"src\", \"http://listjs.com/no-cdn/list.js\");";
script += "document.getElementsByTagName(\"head\")[0]
.appendChild(fileref);}catch(e){alert(e);}";
layout.addComponent(search);
Page.getCurrent().getJavaScript().execute(script);
Page.getCurrent().getJavaScript().execute("var options = {valueNames: ['name', 'email', 'organization']
}; var userList = new List('users', options);");
}
public String searchIdentity(){
String htmlResponse = "<div id='users'><input class='search' placeholder='Search' />";
htmlResponse += "<table><thead><tr><th data-sort='name'>Name</th><th data-sort='email'>Email</th><th data-sort='organization'>Organization</th></tr></thead>";
htmlResponse += "<tbody class='list'>";
myPerson[] personArray = getPersons();
for (myPerson person : personArray) {
htmlResponse += "<tr>";
htmlResponse += "<td class='name'><a href='/view-identity?id=" + person.getId() + "'>" + person.getName().getGiven() + " " + person.getName().getSurname() + "</a></td>";
htmlResponse += "<td class='email'>" + person.getEmail() + "</td>";
htmlResponse += "<td class='organization'>" + person.getOrganization().getId() + "</td>";
htmlResponse += "</tr>";
}
htmlResponse += "</tbody></table></div>";
return htmlResponse;
}Now the above code works at putting the content on the page in the right way, but trying to search with it doesn’t work. Changing the following to my init however…
protected void init(VaadinRequest request) {
...
...
...
...
Page.getCurrent().getJavaScript().execute("alert('I'm not sure why this works!');var options = {valueNames: ['name', 'email', 'organization']
}; var userList = new List('users', options);");
}
...
Adding the alert makes everything work, and I am not sure why. However, having this alert box is undesireable. I can’t have users clicking a pop up button everytime they want to search.
I thought it may have been a timing issue, so I added a setTimeout function to “fake” sleeping. When that didn’t work I tried adding Thread.sleep to the Java code. In both of these scenarios I tried multiple places to call .getJavascript().execute
Nothing seemed to work when I remove alert(), but it works in all scenarios where alert() is in the code. This is driving me up the wall and I would really appreciate some guidance on maybe the correct way to do client-side javascript in Vaadin? I have tried using multiple sources of documentation but they appear to be pretty old and I couldn’t make them work.