JavaScript で削除確認ボタンを作った

昨日詰んだって書いてたけど、なんとかできた。結論から言うと、event.preventDefault()を呼ぶことで、リンクをたどるのをキャンセルできる。

解決策に気づいた経緯

Stimulus Referenceを見ていたらドンピシャリな記述が見つかった。

こんな記述です。

Cancels the event’s default behavior (e.g. following a link or submitting a form)

JavaScript に無知すぎて、全く知りませんでした。昨日までは、確認ボタンの返り値で遷移先のページを分けようとしていたんですが、そうするとどちらの分岐でも削除機能を呼ぶリンクをたどってしまって困っていました。

コード

show.html.erb

<div data-controller="show">
<ul>
  <% @post.errors.full_messages.each do |message| %>
    <li>
      <%= message %>
    </li>
  <% end %>
</ul>
<h2><%= @post.title %></h2>
<h3><%= @post.created_at %></h3>
<p><%= link_to("編集", "/posts/#{@post.id}/edit") %></p>
<p data-action="click->show#confirm"><%= link_to("削除", "/posts/#{@post.id}/destroy", data: {confirm: "a", turbo_method: :post}) %></p>
<p><%= @post.content %></p>
<p><%= link_to("記事一覧へ", "/posts/index") %>
</div>

show_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  confirm() {
    var flag = window.confirm("本当に削除しますか？");
    if (!flag){
      event.preventDefault();
    }
  }
}

1. リンクが押される
2. JavaScript のconfirm 関数（自作）が呼ばれる
3. 確認ボタンが表示される
4. 「はい」が押されたら削除機能を呼ぶリンクをたどる。「いいえ」が押されたらリンクをたどるのをキャンセルする

って感じの流れです。

参考にしたサイト

JavaScript の event.preventDefault() のことが解説してあったので読みました。

【JavaScript】event.preventDefault()が何をするのか