[Rails]confirmでOKしたときだけJSを動作させる方法【初心者向け】

Railsではlink_toヘルパーにdata: {confirm: 'よろしいですか?'}のように書いたり、HTMLで<a data-confirm="よろしいですか?">確認</a>のようにdata-confirmと、リンクをクリックしたときに確認のアラートが出るようにできます。

通常のhrefで指定されたリンクの場合は、confirmでOKを押すと、リンク先に遷移します。ただ、リンクをクリックしたときの処理はAjaxを飛ばすなど、いつでもリンク先に遷移するわけではありません。

そういったときにconfirmでOKされたときのイベントを取得する必要があります。今回はそのやり方をご紹介します。

やり方

やり方は簡単以下のとおり。

<%= link_to '部活をやめる', id: 'retire', data: { confirm: '部活をやめますか?' } %>
<span class="message"></span>
$(function() {
  $('#retire').on('confirm:complete', function(e, answer) {
    if(answer) {
      $('span.message').text("南部、部活やめるってよ")
    }
  }
}

ここで、data-confirmがOKされたとき、confirm:completeというイベントが発火し、このイベントを捉えて処理を実行するようにすれば、OKのときに処理を実行できるようになります。

この部分のrails_ujsの実装は以下を確認してみてください。

https://github.com/rails/rails/blob/main/actionview/app/assets/javascripts/rails-ujs/features/confirm.coffee#L28

まとめ

このくらいの場合であれば、JSのconfirm()関数を利用して作ってやってもいいかもしれませんが、Railsの機能を上手く使うと、I18n対応などメリットがたくさんあります。Railsではconfirm:completeのような独自のイベントをたくさん持っているので、イベント系で困ってもググれば意外と出てくるかもしれません。