Using Stimulus to Take Action

Adding interactivity

All that code gets us the display and the data state in our initial HTML rendered on the server. Now we need to implement interactivity.

The first interactive bit is that changing the pull-down menu for the number of tickets being purchased changes the state of tickets in the display and requires the entire display to be redrawn. We’re going to do this as a regular form submission that uses a Turbo Stream to update the page.

If we look at the earlier _venue_header partial view file, the form is already declared inside a Stimulus controller named form and is the form target of that controller. The form itself sets a URL of tickets_to_buy_path and the select box sets a Stimulus action of "change->form#submit", meaning that, when the select box changes, it will call a submit method on the Stimulus controller.

The controller itself is very generic: