Call server from custom javascript

Hello,

is there any way to invoke a Vaadin application (server side) from custom javascript running in the client? I’d like to be able to tell the server about things that happen outside the web browser, by telling the web browser to run some JS code.

Here is some more detail:

  • I have a “legacy” Windows application
  • The app embeds a web browser
  • A vaadin application is run using the web browser
  • Javascript executed in the web browser can call the legacy app, so Vaadin code can call the legacy app using Window.executeJavaScript
  • And the legacy app can tell the web browser to run some javascript
  • But how can the javascript code call the server?

For example, here is what we have done previously with JSF:

  • A JSF page contains a button that is supposed to open a dialog for some data entry
  • The JSF page contains a javascript function that can be called to invoke the server with a param and do rerender (defined with a4j:jsFunction).
  • When the button is pressed, the JSF page executes some javascript that ends up calling the legacy application
  • The legacy application then opens the dialog (implemented in the legacy code). This no longer has anything to do with JSF or the web browser
  • Once the dialog is finished, the legacy code executes the javascript function in the web browser that calls the server to handle the results of the dialog

So is there any analog to a4j:jsFunction in Vaadin, or is there some other way to invoke the server from custom JS?

First of all, external JS can access the DOM hierarchy of the Vaadin UI to change the field values to pass values to server. You can use setDebugId() to set more easily findable ids for the elements.

Then, you can call vaadin.forceSync() (see
this example
) to make a server request, which sends all pending variable changes (changes to client-side widgets) and syncs updates from server.

Thanks, that did the trick!

Hi all,

It seems to me that this only synchronizes the server with the client (i.e. the client gets all updates from the server).
But how do I sync th eopposite way: client → server?

When setting the value of a vaadin text field via JS and calling vaadin.forceSync() the text field event listeners are not called…
What do I miss?

Thank’s in advance
Udo

Hi,

After setting the value of the textfield, try firing a manual on change event or blur event on the same element, which should send the value to the server (if the field is in “immediate” mode). No need to call forceSync IMO.

Hi,

I found the solution :slight_smile:

The easiest way is using a com.vaadin.ui.NativeButton.
In JavaScript one can trigger this by:

document.getElementById(buttonId).click()

This triggers the event on the server side immediately.

The other solution is to use a TextField and field.setImmediate(true)
The valueChange-Event can be triggered from the client via:


	var elem = document.getElementById(fieldId);
	elem.focus();
	elem.value="He server, this is your job...";
	elem.blur();

forceSync() is not needed at all as Jouni already stated.

I am displaying some html content within an Embedded vaadin component and I would like to interact with Vaadin application from my html content using javascript.

I want to use the solution provided by Z Fabrik with the TextField :

document.getElementById(fieldId)
...

but how do I know the “fieldId” ?

When I look at html generated by Vaadin, I don’t see any ID on the input element

You can use component.setDebugId(String), that should end up as the element id (with a prefix).