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.appendrenders the_toast.html.erbpartial 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
ToastControllerinstance 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)