data: {confirm: }の確認ダイアログをいい感じにする【Ruby on Rails】

はじめに

Railsアプリケーション作成において、よく使われる確認ダイアログ。

これ、ブラウザごとに差はありますがデフォルトはダサいんですよね。

scaffoldで作った簡易アプリだと『destroy』するときに表示される

今回はこの確認ダイアログをBootstrapを利用してお手軽にいい感じのモーダル表示にしてくれるgemを見つけたのでそのご紹介です。

なお、Bootstrapを利用するgemですので、まだの場合は以下の記事を参考に導入を済ませてください。

2018年12月19日Railsアプリに”Bootstrap 4″を導入する【Ruby on Rails】

手順

gem 'data-confirm-modal'

bundle install

// = require data-confirm-modal

bundle exec rails s

以上の操作だけで data: {confirm: }で表示されるダイアログが変更されます。

ちょっと編集してみる

<%= link_to 'Destroy', user, method: :delete, data:
{ confirm: '本当に削除して良いですか?',
  cancel: 'やめる',
  commit: '削除する'}, title: '削除確認' %>

confirm以外にもcancelやcommit、titleなども指定すれば簡単に表記を変えることができます。

※titleだけはdata{}の外に書くことに注意。

おわりに

今回は確認ダイアログをお手軽に雰囲気チェンジできるgemをご紹介しました。

ブラウザのデフォルトダイアログではちょっとさみしいな、というときはぜひお試しください。

参考サイト

• Data-Confirm Modalを使って Rails の削除確認ダイアログをいい感じにする
• railsでgithubみたいな確認ダイアログを簡単に設定する方法