Search code examples
ruby-on-railsbootstrap-4devisetoastr

Toasts notifications not displaying on rails


Im trying to add toast messages on login/logout, but i get no toast. Thank u for any advice!

gemfile

gem 'devise'
gem 'toastr-rails'

app\javascript\packs\application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
toastr = require("toastr")
import "bootstrap"
import "../stylesheets/custom.css"

app\assets\stylesheets\application.css

 *= require bootstrap
 *= require_tree
 *= require toastr
 *= require_self

app\assets\stylesheets\custom.css.scss

@import 'bootstrap/dist/css/bootstrap';
@import 'toastr';

app\views\shared_message.html.erb

<% unless flash.empty? %>
<script type="text/javascript">

    <% flash.each do |key, value| %>
      <% type = key.to_s.gsub('alert','error').gsub('notice', 'success') %>
        toastr['<%= type %>'] ('<%= value %>')
        <% end %>
</script>
      <% end %>

app\views\layouts\application.html.erb

<%= render 'shared/message' %>

Solution

  • In your shared_message.html.erb you are already substituting alert with error and notice with success. So you're doing this correct. But you should name your file _message.html.erb inside the shared folder.

    In application.js you should also //= require toastr and then, make sure you are in your project folder in terminal and run bundle install

    Make sure in you gem file to indicate at least 1. Like this

    gem 'toastr-rails', '~> 1.0'
    

    Go to your views in devise/sessions/new.html.erb and devise/registrations/new.html.erb and edit.html.erb and make sure you still have this here

    <%= render "devise/shared/error_messages", resource: resource %> 
    

    For the error messages above in your views, you will need to add extra work to make it show with toastr.

    Go to application.html.erb and ensure you add your partial shared message above the yield, like this:

    and ensure you replace this - Notice how you named the file?

    <%= render 'shared/message' %>
    <%= yield %>
    

    with this - Notice how you must declare the correct file name?

    <%= render 'shared/shared_message' %>
    <%= yield %>
    

    Above in your question, you named and you created your file in the shared folder as shared_message.html.erb which is wrong.

    So please better name it _message.html.erb it's a partial file, you need to put under score. Also for simplicity just name it _message.html.erb