2016年08月10日

JSの確認ダイアログでOKを押された場合のみ処理を実行したい

とあるRailsアプリで、一つのフォームに二つの送信ボタンが存在し、それぞれ

  • <input type='hidden' name='_method' value='delete'> をformタグ以下に追加し、formアクションを削除用のパスに書き換える動作をする削除ボタン
  • フォームで選択された項目の一括更新ページへ遷移する移動ボタン

のようになっている箇所がありました。

これは押されたボタンによって動作を変えるためにJSで制御されていますが、
一つ目の削除ボタンは、見ての通り削除を実行するために要素を追加しています。

なので、削除ボタン押す -> 確認ダイアログでキャンセルする -> 削除ボタン押す -> キャンセルする
とやっていると、 <input type='hidden' name='_method' value='delete'> が無限に生成されてしまいます。

動作的には普通に動くのですが、あまりに美しくないので、ボタンを押された後の確認ダイアログでOKが選択された場合のみ、要素の操作を行うようにしたいところです。

confirm:complete を使う

これを使うまでは、ボタンがクリックした時に処理が実行されるようになっていました

$(".button").on 'click' ->
  console.log("ボタン押されたらとりあえず処理実行!")

このクリックによる発火を、ダイアログのレスポンスに応じて変化するようにすることができます

$(".button").on 'confirm:complete', (element, answer) ->
  if answer
    console.log("確認ダイアログでOKが選択された時の処理")
  else
    console.log("確認ダイアログでキャンセルが選択された時の処理")

これは便利だ。

参考

まさにこれ