#はじめに
この記事では、flashメッセージを表示したあと一定時間後にフェードアウトさせる方法を解説します。
flashメッセージ系の記事はたくさんあるのですが、
どれもbootstrap
を使用してたり
何やら複雑な方法だったり(Hamlハムル??とかrenderとかややこしい!)。。
もっと簡単な記事はないのか!とモヤモヤしたので、自分まとめます。
自分と同じような人の為に!!(自分用のメモですすみませんw)
#flashメッセージの表示方法
それではレッツ実装!!
まずはコントローラーから。
#コントローラー
def destroy
@review = Review.find(params[:id])
@review.destroy
if review.destroy
redirect_to root_path, notice: "︎レビューを削除しました!"
end
end
メッセージを表示させる記述は4行目のif
文からです。
レビューが削除された後、root_path
(ホーム画面)に戻って
「レビューを削除しました」というメッセージが表示される。という流れです。
続いてビュー画面へ!
#ビュー
<% if flash[:notice] %>
<div class="flash"><%= flash[:notice] %></div>
<% end %>
<%= yield %>
flashメッセージはいろんな場面で共通で使う事が多いので、
views/layouts/application.html.erb
の<%= yield %>
より上の部分に記述します。
コントローラーとビューはひとまず完成!!
#JavaScriptの下準備
まずはGemfile
以下のコードを記述します。
gem 'jquery-rails'
からのターミナルで$ bundle install
続いて
app/assets/javascripts/application.js
に以下のコードを加えましょう。
//= require jquery
これでjQuery
の下準備完了。
#flashメッセージをフェードアウトさせる方法
いよいよ実装していきます。
#①jsファイルに記述する場合(推奨)
以下のコードを
app/assets/javascripts/application.js(上と同じ場所)
に加えたら完成!!
$(function(){
setTimeout("$('.flash').fadeOut('slow')", 2000);
});
#②ビューファイルに直接記述する場合
以下のコードを
flashメッセージを表示させたいビューファイルに加えたら完成!!
<script>
$(function() {
setTimeout("$('.flash').fadeOut('slow')", 2000);
});
</script>
※「.flash」はapplicaton.html.erbのdivに付けたクラス名です。各自自由に命名しましょう。
※数字部分は好みに合わせて変えましょう!ちなみに1000で1秒です。
#さいごに
今回はレビューの削除destroy
後の実装でしたが、もちろん編集edit
や
お気に入りfavorite
なんかも実装可能です。
あとはお好みでCSS
をいじれば、
よく見るflashメッセージの完成です!!
<参考>
https://qiita.com/dir_sh0606/items/b2165459deda97ae8468