25

I'm still working on my rails 4 demo site, and I'm seeing an odd thing. In the controller it has a line like this:

format.html { redirect_to @widget, notice: 'Widget was successfully created.' }

This renders a flash message in the redirected page, which is expected. However, the css class attached to the message div is alert alert-notice rather than a valid Bootstrap alert class, like alert-info.

Where is the class being set for this flash, and how do I customize it?

Also, if I'm deleting a record via ajax, is there a way to access the core flash container to display the message via js, or do I have to show / hide my own flash message div just for ajax requests?

EDIT: my Michael Hartl inspired layouts/application.html.erb:

<div class="container">
  <% flash.each do |key, value| %>
    <div class="alert alert-<%= key %>"><%= value %></div>
  <% end %>
  <%= yield %>
</div>

Thanks!

EDIT 2:

Perhaps I wasn't clear enough in my original question. I understand exactly how the class is being set in the flash object in this case. I am interested in learning how to use and customize the notice: in the format.html block. It seems there should be a way to pass a class via this notice? Or is this not a core Rails way of doing things?

user101289
  • 9,888
  • 15
  • 81
  • 148
  • That depends on your views. Look at your `views/layouts/application.html.*` file and see where it's rendering the `flash` content. – Alex Wayne Mar 21 '14 at 17:56
  • 1
    But alert alert-notice IS valid bootstrap class. You can always flash [:yourchoiceofalert] before the redirect action – Ruby Racer Mar 21 '14 at 18:00
  • You might need to remove scaffold.css from your assets, as it scrambles some bootstrap classes – Ruby Racer Mar 21 '14 at 18:03
  • @StavrosSouvatzis-- http://getbootstrap.com/components/#alerts -- I don't see alert-notice as a valid class. Am I missing something? Also, there's no scaffold.css in my assets. Thanks! – user101289 Mar 21 '14 at 18:06
  • Yeah, sorry, notice is not a case, what I meant to point out is that you need to have the word alert like "alert alert-'class'". Sorry for misleading, should I have done so. – Ruby Racer Mar 21 '14 at 18:31

3 Answers3

40

In application.html.erb, you would be displaying the flash messages.

Update that code as below

  <% flash.each do |name, msg| %>
    <%= content_tag :div, msg, class: "alert alert-info" %>
  <% end %>

You can add the classes that you want to apply to the flash message in the class option.

EDIT

The class is setup as alert alert-notice because of alert alert-<%= key %> in your code. When you call redirect_to @widget, notice: 'Widget was successfully created.

A flash message would be added in flash hash with key as notice and value as Widget was successfully created., i.e.,

flash[:notice] = "Widget was successfully created."

EDIT #2

format.html { redirect_to @widget, notice: 'Widget was successfully created.' }

notice: 'Widget was successfully created.' is an argument passed to redirect_to method. It is added to flash hash in this method.

Kirti Thorat
  • 52,578
  • 9
  • 101
  • 108
  • 1
    thanks, I realize that that's why the class is being applied. I guess I'm asking how that `notice:` works in the `format` block, and how it's accessed and turned into a `flash` rather than passing a `flash` object. – user101289 Mar 21 '14 at 18:08
  • Sorry, I just meant the `format.html` block-- how does that `notice:` element get interpreted, and where? How do you set a custom class for the flash? – user101289 Mar 21 '14 at 19:33
  • @user101289 See the EDIT #2 section for the `notice: element get interpreted,` question. – Kirti Thorat Mar 21 '14 at 19:36
  • If you have more questions, you should post them as a new question. Leave the comments for discussion on current question, i.e., `Where is the class being set for this flash, and how do I customize it?` – Kirti Thorat Mar 21 '14 at 19:39
31

Add this to

app/controllers/application_controller.rb

class ApplicationController
  add_flash_types :success, :warning, :danger, :info
end

and then you can do this in your controllers

format.html { redirect_to @widget, success: 'Widget was successfully created.' }

provided you did this in your layouts

<div class="container">
  <% flash.each do |key, value| %>
    <div class="alert alert-<%= key %>"><%= value %></div>
  <% end %>
  <%= yield %>
</div>
Sachin Mour
  • 635
  • 7
  • 16
  • Here are the docs for `add_flash_types`: https://api.rubyonrails.org/classes/ActionController/Flash/ClassMethods.html – saudes Feb 26 '20 at 22:08
1

If you don't want to mess up with your ApplicationController as @Sachin Mour indicated, you can just add few addtional CSS clases, accordingly:

in app/assets/stylesheets/custom.scss:

/*flash*/
.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    text-align: left;
 }

.alert-alert {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    text-align: left;
 }

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
    text-align: left;
 }

.alert-notice {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
    text-align: left;
 }

Step by step tutorial, how to approach flash messages with devise and bootstrap, you can find here

w1t3k
  • 228
  • 2
  • 12