Last Updated: September 19, 2017
·
16.19K
· sabril

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.

11 Responses
Add your response

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

over 1 year ago ·

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

over 1 year ago ·

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
over 1 year ago ·

def custombootstrapflash
flashmessages = []
flash.each do |type, message|
type = :success if type == :notice
type = :error if type == :alert
text = "<script>toastr.#{type}('#{message}');</script>"
flash
messages << text.htmlsafe if message
end
flash
messages.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'

over 1 year ago ·

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 %>
over 1 year ago ·

@tabish

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.

over 1 year ago ·

@sabril

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

over 1 year ago ·

Thank you! Works perfect!

over 1 year ago ·

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.

over 1 year ago ·

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
over 1 year ago ·

Thanks it was helpful

over 1 year ago ·