Ruby on Railsでredirect_toを使ってフラッシュメッセージを表示させた際に、そのフラッシュメッセージを表示させたままにせずに、一定の時間が経過後に自動でフェードアウトして非表示にさせたいと思うことがありました。本記事ではそれをjQueryのsetTimeoutを使った遅延処理で実現したいと思います。
|
1 2 3 4 5 |
$(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000); }); |
合わせて、本記事ではサンプルを兼ねて、bootstrapをflashメッセージを使いたいと思います。
環境はこちらです
|
1 2 3 4 |
ruby 2.4.0 rails 5.1.6 jquery-rails 4.3.3 bootstrap-sass 3.3.7 |
準備
Gemfile
|
1 2 |
gem 'bootstrap-sass' gem 'jquery-rails' #rails5はこれを入れないとjQueryが動きません |
$ bundle install を実行
|
1 2 |
@import "bootstrap-sprockets"; @import "bootstrap"; |
|
1 2 |
//= require bootstrap-sprockets //= require jquery #rails5はこれを入れないとjQueryが動きません |
Controllers
redirect_toからのflashメッセージは、application_controller.rbに以下のadd_flash_typesを追記すれば簡単に使えます。
app/controllers/application_controller.rb
|
1 2 3 4 5 |
class ApplicationController < ActionController::Base add_flash_types :success, :info, :warning, :danger protect_from_forgery with: :exception end |
使用したいクラスのアクションにflash_typeを書きます。ここではredirect_toにsuccessを追記しました。
|
1 |
redirect_to @user, success: 'User was successfully created.' |
Views
送られたフラッシュメッセージをビューで表示します。nameに先ほどのsuccessが入ります。以下の記述はapplication.html.erbに書いてlayoutの全共通にしてもいいですが、ここではパーシャルにして、必要な箇所にだけ埋め込めるようにしました。
app/views/layouts/_flashes.html.erb
|
1 2 3 4 5 |
<% flash.each do |name, msg| %> <div class="alert alert-<%= name %>"> <%= msg %> </div> <% end %> |
|
1 |
<%= render partial: "layouts/flashes", flash: flash %> |
jQuery
最後に本記事のメインとなるsetTimeoutをセットします。今回はフラッシュメッセージをゆっくり非表示にしたいので、オプションをfadeOut(‘slow’)としています。動作のタイミングはミリ秒表示なので、「1000」の場合は1秒後、「10000」の場合は10秒後となります。本記事では「3000」で３秒後としていますが、この辺りはお好みで変えてみてください。
|
1 2 3 |
$(function(){ setTimeout("$('.alert').fadeOut('slow')", 3000) }) |
以上で、動作するかと思います。
ご覧いただきありがとうございました。😄
