Javascript and vaadin

[Clare (Clare Jone)]

Hi

I am setting a value for the userId textfield in javascript using
document.getElementById(“userIdField”).value = userId;

I want to read the value of this textfield using vaadin…how could this be done?

example userId.getValue() - doesnt return the textfield value…

Any help much appreciated?

[Juho9 (Juho Nurminen)]

I guess this was already answered in your other thread. I’ll paste my answer here as well, just in case someone stumbles upon this post from a Google search or something…

@Juho Nurminen

TextField only sends updates to the server after it receives a change event on the client side. This is to avoid unnecessary server roundtrips. Basically, you have three options here:

1. After setting the value like you did, manually focus and blur the field, like so:

var field = document.getElementById('userIdField');
field.value = userId;
field.focus();
field.blur();

2. Manually fire the change event:

var field = document.getElementById('userIdField');
field.value = userId;
if ('fireEvent' in field) { // IE8
field.fireEvent('onchange', false, true);
} else {
field.dispatchEvent(new Event('change'));
}

3. Export some Java methods from GWT to JavaScript and use the VTextField API directly from there. For this one, take a look at the
   JSNI documentation
   .

Out of these three, I guess the best choise would be #2, especially if you don’t need to support IE8… which I guess you wouldn’t, since you’re using TouchKit anyway. #1 could have some unwanted side effects if you rely on the focus being in a certain place, and #3 is a bit involved if you aren’t familiar with GWT already.

[Alexander211 (Alexander Wanke)]

If you are using vaadin 7.2.0:

I think there is a bug in vaadin 7.2.0 which does not accept the “change” events from javascript.

Try using vaadin 7.1.16. it should work with this version.

http://dev.vaadin.com/ticket/13782

[Juho9 (Juho Nurminen)]

I tested the dispatchEvent approach on Firefox 29.0 with Vaadin 7.2.0 and it seemed to work just fine, so the virtual keyboard must be doing something different.

[Alexander211 (Alexander Wanke)]

@Juho Nurminen

I tested the dispatchEvent approach on Firefox 29.0 with Vaadin 7.2.0 and it seemed to work just fine, so the virtual keyboard must be doing something different.

i see. there must be an issue with the $.trigger function in jquery. using the dispatchEvent function works fine.

yet its still strange that the virtual keyboard stopped working with vaadin 7.2.0

[Alexander211 (Alexander Wanke)]

@Juho Nurminen

I tested the dispatchEvent approach on Firefox 29.0 with Vaadin 7.2.0 and it seemed to work just fine, so the virtual keyboard must be doing something different.

Textfield
Compoment seems to react to to dispatchEvent. But
PopupDateField
does not.

tested with vaadin 7.2.1

[Juho9 (Juho Nurminen)]

Are you calling dispatchEvent on the right element? If you are using PopupDatefield.setId() on the server-side and then doing document.getElementById() on the client, you’ll end up with a div. Instead you should be sending the events to the input element.

[Alexander211 (Alexander Wanke)]

@Juho Nurminen

Are you calling dispatchEvent on the right element? If you are using PopupDatefield.setId() on the server-side and then doing document.getElementById() on the client, you’ll end up with a div. Instead you should be sending the events to the input element.

yes, i am sure the virtualkeyboard is sending it to the right element. its sending to the field with the “.v-textfield” class.

The inputfields are identified by this jquery script:

$('.v-textfield').keyboard()

i am able to enter the text. but PopupDateField.getValue() does not recieve the entered value.

[Juho9 (Juho Nurminen)]

I tested this by typing some plain old JavaScript in the console, and it seems to be working correctly. Did you remember to call PopupDateField.setImmediate(true) on the server?

[Alexander211 (Alexander Wanke)]

@Juho Nurminen

I tested this by typing some plain old JavaScript in the console, and it seems to be working correctly. Did you remember to call PopupDateField.setImmediate(true) on the server?

yes , i use PopupDateField.setImmediate(true) on the server.

[Juho9 (Juho Nurminen)]

Here’s the JavaScript snippet I tested this with:

var field = document.getElementsByClassName('v-datefield-textfield')[0] ; field.value = '5/7/11 02:20:00 PM'; field.dispatchEvent(new Event('change')); Can you check if that works? I’m seeing server-side change events and and updated values just like I should.

[Alexander211 (Alexander Wanke)]

@Juho Nurminen

Here’s the JavaScript snippet I tested this with:

var field = document.getElementsByClassName('v-datefield-textfield')[0] ; field.value = '5/7/11 02:20:00 PM'; field.dispatchEvent(new Event('change')); Can you check if that works? I’m seeing server-side change events and and updated values just like I should.

yes, this is working.

but jquerys (v1.11.1) .trigger() and .change() functions do not work

[Juho9 (Juho Nurminen)]

In that case I’m guessing its a bug in jQuery.