2

I want to add two different logics to a button click. The button click should send two requests to the server, so that when the first requests finishes, the second starts. The first request should disable some other buttons on the page, while the second requests executes the main logic which takes some time. My problem is that I can't seem to bind the actions in the order I want, and the also happen in one request. I tried adding a clickListener to the button so that it would execute the first button disabling logic and the main button action is the time intensive logic, but it is executed in the wrong order, and in one request.

Michael Kročka
  • 617
  • 7
  • 22
  • 2
    You should try to avoid relying on how Vaadin communicates between the browser and the server. I recommend that you instead call the two actions in a single click listener, in the order that you want. This tutorial shows you how to disable buttons during long-running operations https://youtu.be/ZywjOZYWBuQ – Marcus Hellberg Sep 23 '21 at 18:38
  • As I am but an intern at a larger firm, I do not have the authority to apply such a big change. Even more so when the task is quite small, but I appreciate your comment and believe that the tutorial would work for my problem. Thank you. – Michael Kročka Sep 24 '21 at 17:49
  • 1
    This Cookbook recipe describes how to do this, but you'll need push enabled: https://cookbook.vaadin.com/long-running-task – Marc Englund Sep 27 '21 at 07:31

1 Answers1

3

You might not need multiple requests for this case, because those other buttons can be disabled immediately in the browser using JavaScript. The only significant drawback with that is that the buttons are then not considered to be disabled by the server which means that someone could use JavaScript to enable them again. If this is critical, then it's still possible to double check the situation in the server-side click listener of each button.

To make it so that clicking one button disables some other buttons, you can add a client-side click listener like this:

button.getElement().executeJs(
  "this.addEventListener('click', function() {"
    + "$0.disabled = true;"
    + "$1.disabled = true;"
  + "})", otherButton1, otherButton2);

Where $0 will be a reference to the DOM element corresponding to otherButton1 and $1 will correspond to otherButton2.

To enable the buttons again from the server, you need to use some more JavaScript. This is because the server still believes the buttons are enabled which means that setEnabled(true) would be ignored.

otherButton1.getElement().executeJs("this.disabled = false");
otherButton2.getElement().executeJs("this.disabled = false");
Leif Åstrand
  • 7,820
  • 13
  • 19