stimulus

To view the browser console log, open the browser console by pressing Ctrl + Shift + J on Windows or Cmd + Option + J on a Mac Let’s review the steps for setting up toasts: User submits comment form (via Turbo). Rails controller saves comment, sets flash[:notice] Rails renders create.turbo_stream.erb The turbo_stream.append renders the _toast.html.erb partial with the flash message The browser receives the Turbo Stream response. Turbo appends the new toast HTML (containing data-controller="toast") into the Stimulus sees the new data-controller="toast" element Stimulus initializes a new ToastController instance for this element The controller’s connect() method runs connect() uses Bootstrap to show() the toast Bootstrap automatically hides the toast after 3 seconds

May 1, 2025 - 01:25

To view the browser console log, open the browser console by pressing Ctrl + Shift + J on Windows or Cmd + Option + J on a Mac

Let’s review the steps for setting up toasts:

User submits comment form (via Turbo).
Rails controller saves comment, sets flash[:notice]
Rails renders create.turbo_stream.erb
The turbo_stream.append renders the _toast.html.erb partial with the flash message
The browser receives the Turbo Stream response.
Turbo appends the new toast HTML (containing data-controller="toast") into the
Stimulus sees the new data-controller="toast" element
Stimulus initializes a new ToastController instance for this element
The controller’s connect() method runs
connect() uses Bootstrap to show() the toast
Bootstrap automatically hides the toast after 3 seconds