Vaadin：如何通過javascript觸發更改事件？

Question

我有一個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觸發組件的事件？

Answer 1

不幸的是，自vaadin 7.2版以來，JQuerys .trigger（）和.change（）函數不起作用。

我不確定是Jquery還是Vaadin Bug。 可能是Jquery Bug。

但是，您必須使用本機javascript函數.dispatchEvent（）

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