How to Convert Rails Flash Messages to Toastr Notifications

How to Convert Rails Flash Messages to Toastr Notifications

20 Jul 2021
0 Comments
How to Convert Rails Flash Messages to Toastr Notifications

Here are the steps to add toastr with the webpack.

 

1) Add toastr js with yarn from terminal

 

yarn add toastr

 

2) Require toastr in app/javascript/packs/application.js

 

global.toastr = require("toastr")

 

3) Create app/javascript/stylesheets/application.scss file to import custom or library css files

 

4) Import toastr css in app/javascript/stylesheets/application.scss

 

@import 'toastr'

 

5) Import app/javascript/stylesheets/application.scss file in app/javascript/packs/application.js

 

import "../stylesheets/application"

 

6) Add the following code in layouts/application.html.erb

 

<% unless flash.empty? %>

   <script type="text/javascript">

      <% flash.each do |f| %>

        <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info')..gsub('notice', 'success') %>

           toastr['<%= type %>']('<%= f[1] %>');

        <% end %>

    </script>

<% end %>

 

 

7) Let’s use the controller file

 

def create

  @blog = Blog.new(blog_params)

   respond_to do |format|

      if @blog.save

         format.html { redirect_to @blog, flash: {success: 'Blog Created Successfully'}}

        else

           format.html { render :new }

          end

     end

end

 

 

Output:

toastr notification

 

Conclusion:

 

Toastr understands error or is it successful, we are replacing flash’s alert and notice keys with error and success respectively.




Leave a comment: