Flash Messages in Rails

Flash messages are a useful tool for improving the user experience of your Rails app. They allow you to display short, temporary messages to your users after they perform an action, such as creating a new account or updating their profile. In this guide, we’ll cover everything you need to know about using flash messages in your Rails app.

Table of Contents

Introduction to Flash Messages

Flash messages are a way to display brief, temporary messages to your users in Rails. They are typically displayed after a user performs an action, such as creating a new account or updating their profile. Flash messages are a great way to provide feedback to your users and guide them through the app.

Alert vs Notice: Understanding the Differences

In Rails, there are two types of flash messages: alerts and notices. Alerts are used to display messages that require the user’s attention, such as error messages or warnings. Notices are used to display messages that inform the user of a successful action, such as a confirmation message.

Here’s an example of how to use flash messages in a Rails controller:

def create
  @user = User.new(user_params)
  if @user.save
    flash[:notice] = "Your account has been created successfully!"
    redirect_to root_path
  else
    flash[:alert] = "There was an error creating your account."
    render :new
  end
end

In this example, we’re using the flash hash to set a notice message if the user is successfully created, and an alert message if there is an error.

Rendering Flash Messages in Your Rails App

Now that we know how to set flash messages in our controllers, let’s look at how to render them in our views.

First, we need to add a partial to our layouts folder to render the flash messages. In the partial, we’ll use an if statement to check if there are any flash messages to display, and then use a case statement to determine whether it’s an alert or a notice. Here’s what the partial might look like:

<% if flash.any? %>
  <div id="flash">
    <% flash.each do |name, msg| %>
      <% case name %>
      when :notice
        <div class="notice">
          <p><%= msg %></p>
        </div>
      when :alert
        <div class="alert">
          <p><%= msg %></p>
        </div>
      <% end %>
    <% end %>
  </div>
<% end %>

Next, we’ll need to include the partial in our application.html.erb layout file, like this:

<body>
  <%= render 'layouts/flash' %>
  <%= yield %>
</body>

Now, whenever a flash message is set in a controller, it will be rendered in the view.

Customizing the Look of Your Flash Messages

You can customize the look of your flash messages by adding CSS styles to your app. For example, you might want to change the background color or font size of your flash messages.

To do this, you can simply add a new class to the div element in the partial, like this:

<% if flash.any? %>
  <div id="flash">
    <% flash.each do |name, msg| %>
      <% case name %>
      when :notice
        <div class="notice my-custom-class">
          <p><%= msg %></p>
        </div>
      when :alert
        <div class="alert my-custom-class">
          <p><%= msg %></p>
        </div>
      <% end %>
    <% end %>
  </div>
<% end %>

Then, in your CSS file, you can add styles for the my-custom-class class:

.my-custom-class {
  background-color: #eee;
  font-size: 18px;
}

This will apply the specified styles to all of your flash messages.

When Flash Messages are Displayed in Rails

Flash messages are only displayed once, on the next page load after they are set. For example, if a flash message is set in a create action, it will be displayed on the show page that is displayed after the create action is completed.

If you want to display a flash message on the current page, you can use the flash.now hash instead of the flash hash. The flash.now hash will display the flash message on the current page, but it will not be carried over to the next page.

Recap: Key Points to Remember

  • Flash messages are a way to display brief, temporary messages to your users in Rails.
  • There are two types of flash messages: alerts and notices.
  • You can customize the look of your flash messages by adding CSS styles to your app.
  • Flash messages are only displayed once, on the next page load after they are set.

With this knowledge, you should be well on your way to mastering flash messages in your Rails app. Happy coding!

Flash Messages in Rails
Scroll to top