Vaadin: How to make a custom ajax call from generated HTML table?

Question

I present data by generating the table HTML by hand and setting it to a Vaadin Label in ContentMode.HTML (not using Vaadin Table/Grid).

I want to generate a link or a button in each row that will cause a server call to the same View (and pass the row item id).

One vague idea I have: Generate a hidden Vaadin Button for each row item, and add it somewhere outside of my table HTML to the page. Then I would hope that there is some Javascript that would allow me to access and trigger those hidden buttons. I could generate that Javascript call inside my table HTML.

Do you think this approach could work? How would I use Javascript to access and trigger those hidden Vaadin buttons?

Or is there an easier way (without resorting to using Table/Grid)?

EDIT: Maybe this would work with a single hidden Button, too. The javascript call could maybe set the Button caption to the row id before triggering it.

Answer 1

Vaadin offers Javascript function callbacks.

I found a solution that generates this HTML for each row:

<a class='button' href='javascript:myfunction(" + itemId + ");'>Execute</a>

The function is registered like this.

JavaScript.getCurrent().addFunction("myfunction", args -> handleMyfunction(args));

And handled like this:

  private void handleMyfunction(JsonArray args)  {
    long itemId = (long) args.getNumber(0);
    LOGGER.log(Level.INFO, "itemId: " + itemId);
  }

*very happy