Rails 4 Toastrjs Notifications

Rails Notifications

When saving or updating records in Rails, we can use flash notifications (in the controller) to send messages which will be displayed to the user on the next request. For better user experience you can use toastrjs notifications instead of flash messages.

In this post I will show how to convert flash messages to toastrjs notifications.

Installing taostr

First of all, we add the toastr-rails gem to the gemfile:

Next, we run the bundle install command.

Finally, we’ll add toastr to application.css and application.js:

Rails 4: Toastrjs Notifications

Now that we’ve installed toastr, It’s time to use it. We’ll add the toastr options in application.js to customize the look of the notifications:

You can use this demo page to customize the look of your toastr notifications.

Finally, we’ll modify application.html.erb to convert the flash messages to toastr notification:

I hope that was informative for you!

The full example code can be found at Github: Rails 4 Toastrjs Notifications

Leave a Reply

9 Comments

  1. Tasu Akash

    Hello, Thanks for your useful gem.

    I’ ve tried to implement this gem in haml and wrote like below

    – unless flash.empty?
    – flash.each do |f|
    – type = f[0].to_s.gsub(‘alert’, ‘error’).gsub(‘notice’, ‘info’)
    – toastr[‘= type ‘](‘= f[1] ‘);

    However, this code was not working.

    Could I ask how to write toastr in haml.

    Thanks.

      • Tasu Akash

        Thanks for your reply, Hicham

        I resolved it. here is my haml code.

        Hope to it helps someone

        Please adjust indent.

        - unless flash.empty?
        - flash.each do |f|
        - type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info')
        = javascript_tag do
        toastr["#{type}"]("#{f[1]}")

        • Daniel Torres

          thanks Tasu!!

          that work for me like a charm !

  2. Ryan Dandro

    Thanks so much for this article. I’m running rails 4.24 and ruby 2.1.4 and was up and running in under 5 minutes. No bugs and worked with zero hassle. I was in a bit of a pinch trying to finish this feature for a demo tomorrow morning and you saved me a headache. I was looking into growlyflash and bootstrap notify but were causing headaches with my setup, although toastr worked flawlessly with no issue.

    Keep up the good work!
    Ryan

    • Hicham

      Thank you for your comment!

  3. etern

    still works a charm! thanks!

  4. gossip wang

    hello, i have one question. I can show toastr message but I can’t change toastr option. can you help me? thank you. Finally thanks for your useful gem.

  5. Ron Huppert

    Thanks for the article. Toastr is a terrific improvement over the basic flash implementation.

    I wonder if there is a way to pass toastr options based on a specific flash message sent. For example, when a serious error occurs, enable closeButton and disable timeOut or changing any option.

Next ArticleInstalling Ruby On Rails on Ubuntu 15.04 15.10