Ruby on Railsで削除ボタンを押したときに確認ダイアログを表示させる方法

よこのじ(@yokonoji_work)です。

Ruby on Railsで投稿した内容を削除するためのボタンを押したとき、そのまま削除されるとうっかり誤操作がこわいので、確認をしてほしいと思いますよね。

そこで、このようなBootstrapデザインのダイアログを表示させる方法をご紹介します。

確認ダイアログ

Ruby on Railsで削除ボタンを押したときにダイアログを表示させる方法

Bootstrapデザインのダイアログを表示させるgem「data-confirm-modal」を使用します。RailsにBootstrapを導入する方法については「Ruby on RailsでBootstrapを導入する方法【手順どおりで簡単に】」を参考にしてください。

それでは data-confirm-modal を導入します。

gem 'data-confirm-modal'

Gemfileに追加して、bundle installしてください。

インストールできたら、/app/assets/javascripts/application.js に次の記述を追加してください。

//= require data-confirm-modal

// は付いたままでOKです。

これでダイアログを表示させる準備はできました。次のようなダイアログを表示させるための記述を確認してみましょう。

確認ダイアログ

<%= link_to "/todos/#{t.id}", class: "text-danger", method: :delete, data:
  { confirm: 'Todoを削除しますか?',
    cancel: 'やめる',
    commit: '削除'}, title: '削除の確認' do %>
    削除ボタン
<% end %>

この例では、methodにdeleteを指定した「削除ボタン」というリンクを押したときにダイアログが表示されます。

ダイアログで「やめる」を押すと削除は実行されず、「削除」を押したときは削除(destroy)が実行されます。

入力した値と一致する場合のみ削除を有効にするオプション

verify と verify_text という属性を追加すると、フォーム入力した値がverifyで設定した値と一致するときのみ削除が有効となります(一致しない場合は「削除」をクリックしても反応しません)。

<%= link_to "/todos/#{t.id}", class: "text-danger", method: :delete, data:
  { confirm: 'Todoを削除しますか?',
    verify: "削除したい項目の名前",
    verify_text: "削除したい項目名を入力してください",
    cancel: 'やめる',
    commit: '削除'}, title: '削除の確認' do %>
    削除ボタン
<% end %>

ここでは、「削除したい項目の名前」という値をverifyに設定していますので、次のようにフォームに入力すると削除が可能な状態となります。

入力した値との一致確認

厳重に削除確認を行いたい場合は、使ってみると良さそうです。

 

誤操作により意図しない削除を行うと取り返しがつかないので、削除については紹介したダイアログで確認を取る方法を検討してみてください。