Not updating textfield value after setting value via javascript

Flow
1

I am using wavesurferjs jquery plugin in my project. with this i’m setting start point, fade point through javascript into the textfield. setImmediate method allowed me update values. Now in vaadin 8 setImmediate method is removed. And after setting values through javascript, i’m getting old values. How can i get updated values? I am totally stuck with this. Please help me to get rid of this.

Js Code:

var startPoint = window.parent.document.getElementById("startPoint");
var endPoint = window.parent.document.getElementById("fadePoint");
startPoint.value = Math.ceil(region.start * 44100);
endPoint.value = Math.ceil(region.end * 1000); 
startPoint.onchange();
endPoint.onchange();

Java code:

 private TextField startPoint = new TextField();
 private TextField fadePoint = new TextField();
 startPoint.setId("startPoint");
      fadePoint.setId("fadePoint");
if (startPoint.getValue() != null) {
        audioItem.setStart_point((startPoint.getValue() instanceof String) ? Long.parseLong(startPoint.getValue()) : Long.valueOf(startPoint.getValue()));
      }
      if (fadePoint.getValue() != null) {
        audioItem.setFade_point((fadePoint.getValue() instanceof String) ? Long.parseLong(fadePoint.getValue()) : Long.valueOf(fadePoint.getValue()));
      }
2

It is a bit mystery why you want to set the value with JavaScript in the first place. Could there be alternatives? Better understanding of the use case could reveal this.

However, have you tried to set value change mode in text field to EAGER, does it help?

3

yes, i already tried to set value change mode to EAGER. But result was same.

4

Does anyone have an update on this, I have the same problem!

Java Code

        TextField usernameField = new TextField("Username");
        usernameField.setId("batmanField");

JavaScript Code

        var WinNetwork = new ActiveXObject('WScript.Network');
        document.getElementById("batmanField").value = WinNetwork.UserName;

The field gets set, but getValue() on the text field in an action listener returns an empty string:

	usernameField.getValue()
5

Anyone fixed this issue ??

6

If you set the TextField’s <input> value programmatically in JS you also need to trigger the change even for it from JS so that Vaadin can notice the change and sends the value to the server. The browser triggers this event automatically if the input value is set by a user interaction (user actually typing in the input) but when you programmatically set the value in JS you need to handle this manually too.

I guess this is what the original poster was trying to do with this code:

startPoint.onchange();
endPoint.onchange();

But there is no such method as onchange for <input> element.

This is the correct way to trigger a change event (after setting the value) in native JavaScript:

startPoint.dispatchEvent(new Event('change'));
endPoint.dispatchEvent(new Event('change'));

I think this should work even in IE11 (and all modern browsers) but if you need to support older IE versions you may need to trigger the event differently. For more info see: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events. Or if using jQuery you can do something like $(startPoint).change() or $(startPoint).trigger('change') instead.