rails 4 -- flash notice

25
votes

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?

3
ruby-on-railsrubytwitter-bootstrapruby-on-rails-4
That depends on your views. Look at your views/layouts/application.html.* file and see where it's rendering the flash content. – Alex Wayne
But alert alert-notice IS valid bootstrap class. You can always flash [:yourchoiceofalert] before the redirect action – Ruby Racer
You might need to remove scaffold.css from your assets, as it scrambles some bootstrap classes – Ruby Racer
@StavrosSouvatzis-- 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
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

3 Answers

40
votes

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.

31
votes

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>
1
votes

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