Vaadin：如何通过 javascript 触发更改事件？答案

【问题标题】：Vaadin : How to trigger change events by javascript?Vaadin：如何通过 javascript 触发更改事件？
【发布时间】：2014-07-30 09:51:14
【问题描述】：

我有一个 TextField 组件并在其上添加了 ValueChangeListener。

@Theme("myTheme")
@SuppressWarnings("serial")
@Title("VaadinTest")
@PreserveOnRefresh
@JavaScript({ "vaadin://js/jquery/jquery-1.10.1.min.js", "vaadin://js/test.js" })
public class HelloWorldUI extends UI {

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    final TextField txtName = new TextField();
    txtName.setId("test");
    txtName.setImmediate(true);
    txtName.addValueChangeListener(new ValueChangeListener() {

        @Override
        public void valueChange(final ValueChangeEvent event) {
            System.out.println(txtName.getValue());
        }
    });
    layout.addComponent(txtName);

    Button btnOK = new Button("OK");
    btnOK.addClickListener(new ClickListener() {

        public void buttonClick(ClickEvent event) {
            Page.getCurrent().getJavaScript().execute("doSomething()");

        }
    });
    layout.addComponent(btnOK);

    setContent(layout);
}
}

在我的 js 文件中 (test.js)

function doSomething() {
$('input#test').val("John").change();
}

但我从来没有得到 ValueChangeEvent ，我的意思是我从来没有得到文本 John 的控制台日志。

我错过了什么？或者可以通过javascript触发组件的事件吗？

【问题讨论】：

标签： javascript vaadin vaadin7

【解决方案1】：

不幸的是，JQuery 的 .trigger() 和 .change() 函数从 vaadin 7.2 版开始就不起作用了。

我不确定它是 Jquery 还是 Vaadin 错误。可能是一个 Jquery Bug。

但是，您必须使用原生 javascript 函数 .dispatchEvent()

  com.vaadin.ui.JavaScript.getCurrent().execute(
    "var field = document.getElementById('test');" +
            "field.dispatchEvent(new Event('change'));"
    );

【讨论】：

如果你调用document.getElementById('test').blur()来触发valuechangelistener，它也应该可以工作