地方でリモートワーク

プログラミング、先物、fx,仮想通貨なんでもやります

RailsでflashメッセージをBootstrapで表示するスマートな方法

スポンサーリンク

f:id:ihatov08:20170208215245j:plain RailsでflashメッセージをBootstrapで表示するスマートな方法です。

add_flash_typesメソッドを使う

add_flash_types - リファレンス - - Railsドキュメント

add_flash_typesメソッドを使うと、flashのキーの指定が自由にできます。

bootstrapの場合は以下4つのキーが指定できます。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

f:id:ihatov08:20170208215617p:plain

つまり、rails側でもこのsuccess,info,warning,dangerを使えるようにします。

# application_controller.rb

class ApplicationController < ActionController::Base
  add_flash_types :success, :info, :warning, :danger
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
end

add_flash_typesで指定したキーがredirect時のflashで使えるようになります。

通常はnoticeとalertだけかと思いますが、任意のキーを指定できるようになります。

# task_controller.rb

redirect_to tasks_path, success: 'succress create task'

viewで表示方法

<% flash.each do |name, msg| %>
  <div class="alert alert-<%= name %>">
    <a class="close" data-dismiss="alert">×</a>
    <%= msg %>
  </div>
<% end %>

これをコピペでいけます。

f:id:ihatov08:20170208215837p:plain