【Rails5】setTimeoutを使ってflash messageを自動的に非表示にする

rails flash message
Ruby on Railsでredirect_toを使ってフラッシュメッセージを表示させた際に、そのフラッシュメッセージを表示させたままにせずに、一定の時間が経過後に自動でフェードアウトして非表示にさせたいと思うことがありました。本記事ではそれをjQueryのsetTimeoutを使った遅延処理で実現したいと思います。

合わせて、本記事ではサンプルを兼ねて、bootstrapをflashメッセージを使いたいと思います。

環境はこちらです

準備

Gemfile

$ bundle install を実行

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

Controllers

redirect_toからのflashメッセージは、application_controller.rbに以下のadd_flash_typesを追記すれば簡単に使えます。

app/controllers/application_controller.rb

使用したいクラスのアクションにflash_typeを書きます。ここではredirect_toにsuccessを追記しました。

Views

送られたフラッシュメッセージをビューで表示します。nameに先ほどのsuccessが入ります。以下の記述はapplication.html.erbに書いてlayoutの全共通にしてもいいですが、ここではパーシャルにして、必要な箇所にだけ埋め込めるようにしました。

app/views/layouts/_flashes.html.erb

jQuery

最後に本記事のメインとなるsetTimeoutをセットします。今回はフラッシュメッセージをゆっくり非表示にしたいので、オプションをfadeOut(‘slow’)としています。動作のタイミングはミリ秒表示なので、「1000」の場合は1秒後、「10000」の場合は10秒後となります。本記事では「3000」で3秒後としていますが、この辺りはお好みで変えてみてください。

以上で、動作するかと思います。
ご覧いただきありがとうございました。😄


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。