How to make a button click to send two different requests to server in specific order

user_8727518 0
Viewed 219

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.

vaadin8 vaadin request button
1 Answers

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");
user_23769540
Related