Coverting Rails Flash Messages to Toastr Notifications
We can set Toastr as default behavior to Rails flash message, here is how i done it:
download latest toastr from https://github.com/CodeSeven/toastr . Copy toastr.js to javascripts folder and toastr.css to stylesheets folder)
add toastr.js to application.js
//= require toastr
add toastr.css and toastr-responsive to application.css
*= require toastr
Create a helper method in app/helpers/application_helper.rb:
def custom_bootstrap_flash
flash_messages = []
flash.each do |type, message|
type = 'success' if type == 'notice'
type = 'error' if type == 'alert'
text = "<script>toastr.#{type}('#{message}');</script>"
flash_messages << text.html_safe if message
end
flash_messages.join("\n").html_safe
end
and then add this helper in your layout file ex. app/views/application.html.erb
below the javascript include tag, so it will be like this
<%= javascript_include_tag "application" %>
<%= custom_bootstrap_flash %>
you can modify the toastr settings in toastr.js file.
Written by Syaiful Sabril
Related protips
11 Responses

Sir, Can i see your example?... because i have a problem in my rails 4 app

Seems to have possible XSS-vulnerability if flash message contains user input.

Change :error to 'error' and others
module ApplicationHelper
def custom_bootstrap_flash
flash_messages = []
flash.each do |type, message|
type = 'success' if type == 'notice'
type = 'error' if type == 'alert'
puts type
text = "<script>toastr.#{type}('#{message}');</script>"
flash_messages << text.html_safe if message
end
flash_messages.join("\n").html_safe
end
end

def custombootstrapflash
flashmessages = []
flash.each do |type, message|
type = :success if type == :notice
type = :error if type == :alert
text = "<script>toastr.#{type}('#{message}');</script>"
flashmessages << text.htmlsafe if message
end
flashmessages.join("\n").html_safe
end
-----> Will don't show any things.
If you want to use
You must put
type = type.to_sym
before
type = 'success' if type == 'notice'

Hey.
Using that code in your controller as the following:
redirect_to "/employees", :flash => { :success => "#{@employee.first_name} #{@employee.last_name} Added." }
or
flash.now[:success] = "#{@employee.first_name} #{@employee.last_name} Deleted Successfully."
both work. However, how do you get the toastr messages to show up when you have your views error message like so :
<% if @tool.errors.any? %>
<div id="error_explanation" class="bit-warning close" data-dismiss="alert">
<h2><%= pluralize(@tool.errors.count, "error") %> prohibited this tool from being saved:</h2>
<ul>
<% @tool.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
`</ul>
</div>
<% end %>

I think that's not the case here because it's not from the flash message. That is for form error messages. But i think you can still use the html format in the toastr so it should be ok.

It hasn't worked for me for the form error messages.

Thank you! Works perfect!

The solution for rails 4 is here http://www.benkirane.ch/rails-4-toastrjs-notifications/, i implement in a application and work, is easy of implement.
Here's an alternative with iziToast:
module ApplicationHelper
def flash_messages
flash_messages = []
flash.each do |type, message|
return unless message
level = case type
when 'notice' then 'success'
when 'alert' then 'error'
when 'info' then 'info'
when 'warn' then 'warn'
else
# Log and notify that a weird flash type has appeared.
'info'
end
js = javascript_tag %{iziToast.#{level}({ title: '#{level.capitalize}:', message: "#{message}" });}
flash_messages << js
end
flash_messages.join('/n').html_safe
end
end
Thanks it was helpful