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<div id="toasts">
- 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 toshow()
the toast - Bootstrap automatically hides the toast after 3 seconds
Top comments (0)