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:

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