In my flow i got stuck further with a case where I had to call a javaScript function when any server side UI component values gets updated. For example If i have a date picker in my vaadin application. I want to invoke a javascript function which is in myscript.js file.
myscript.js
window.A_B_MyComponent = function(){
function display(){
alert("display when date got change");
}
}
I have below connector Connector
package A.B;
@JavaScript({"myscript.js"})
public class MyComponent extends AbstractJavaScriptComponent{
}
Now in my vaadin code there is a date picker component. What i want to invoke display function of javascript when the value of date picker gets change. How i can do this ?
What Olli suggests is good for executing anything in the global JS context, but if you want to tie it to the same scope as the vaadin-date-picker element and reference it easily, then you should probably take a look at what is e.g. done here:
Pekka Hyvönen:
What Olli suggests is good for executing anything in the global JS context, but if you want to tie it to the same scope as the vaadin-date-picker element and reference it easily, then you should probably take a look at what is e.g. done here:
I think I am in need to give same kind of implementation. I will try to understand the implementation and apply it.
Meanwhile i just want to share with you what exactly I want to implement.
My javaScript contains a D3 implementation of a chart. On the change of the date(or any other filter value) I have to pick the value triggered in valueChangeListener. Pass it to javascript function and apply it to the data available so that my chart will change accordingly.
So there is slightly change in connector javascript
myscript.js
window.A_B_MyComponent = function(){
function display(date){
var filteredData = filterDataByDate(date);
updateChart(filteredData);
}
}
And java component where the javascript method should be called/implemented
package A.B;
@JavaScript({"myscript.js"})
public class MyComponent extends AbstractJavaScriptComponent{
// method would be something like below
publice updateDisplayedData(Date date){
callFunction("display",date);
}
}
In the given example its instantiating given namespace, but with me its connector whose function i have to call. kindly advice how it can be done. FYI I am using vaadin 7