17

The following code displays Rails flash messages using Bootstrap 3.0:

<%# Rails flash messages styled for Twitter Bootstrap 3.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "danger" %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

The code is from the article Bootstrap and Rails.

Similar code from the article Foundation and Rails can be used with Foundation:

<%# Rails flash messages styled for Zurb Foundation 5.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div data-alert class="alert-box round <%= name == :notice ? "success" : "alert" %>">
      <%= content_tag :div, msg %>
      <a href="#" class="close">&times;</a>
    </div>
  <% end %>
<% end %>

For either Bootstrap or Foundation, when I upgrade my application from Rails 4.0 to Rails 4.1, all flash messages appear in red, even "notice" messages which should appear in green.

What's changed in Rails 4.1 to break this code?

Daniel Kehoe
  • 10,952
  • 6
  • 63
  • 82

2 Answers2

33

Found my own answer...

I've revised my Rails and Bootstrap tutorial and updated the rails-bootstrap example app accordingly.

The Rails flash message hash contains a key (a "name") and a value (the "message").

Under Rails 4.0, the key is a Symbol.

Under Rails 4.1, the key is a String.

Styling flash messages for display with Bootstrap or Foundation requires parsing the key to determine if it is an alert or a notice.

Under Rails 4.1, names are Strings and are not matched by the code above, instead getting styled in red with the alert-danger class.

To fix it, the code for displaying flash messages with Bootstrap should change to accommodate both Rails 4.0 and Rails 4.1:

<div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">

For Foundation, the code should change to this:

<div data-alert class="alert-box round <%= name.to_s == 'notice' ? 'success' : 'alert' %>">
Daniel Kehoe
  • 10,952
  • 6
  • 63
  • 82
  • How would this affect code like `redirect_to some_path, notice: "My message"`? I'm setting my flash messages in the controller. – Dennis Apr 11 '14 at 21:35
  • This was really helpful for me - thanks for following up and posting the right answer. You should mark this as the correct answer to make it easier to spot. Thanks! – JoshDoody Apr 25 '14 at 20:21
  • should this be `name.to_sym` instead of `name.to_s` – Steve Mar 28 '15 at 23:50
1

I tried this answer but it was marking everything as danger if it wasn't 'notice'. I ended up making a helper class to keep my other flash messages unchanged and only alter the devise ones which were returning the old boostrap 'notice' and 'alert' classes.

<div class="container">
  <% flash.each do |name, msg| %>
    <% if msg.is_a?(String) %>
      <div class="alert alert-<%= flash_class_name(name) %>" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
        </button>
        <%= content_tag :div, msg, :id => "flash_#{name}" %>
      </div>
    <% end %>
  <% end %>
</div>

and a helper method

def flash_class_name(name)
    case name
    when 'notice' then 'success'
    when 'alert'  then 'danger'
    else name
    end
end
loubotics
  • 171
  • 2
  • 5