【Rails 6】destroy メソッドが動作しない

Question

開発環境

• PC:Mac
• Os:Catalina 10.15.1
• ruby2.6.3
• Rails 6.0.1

destroyアクションを実行しようとしてもShowアクションが実行されてしまう。

標題のとおりですが、削除ボタンを押すとshowアクションが呼ばれてしまう状態です。

調べたところ、jQueryが関係しているようですが、問題なくrecuireしています。
https://teratail.com/questions/22994

基本的な質問で申し訳ございませんが、初学者のためご教示いただけますと幸いです。

以下ソースコード

controller

class BoardsController < ApplicationController
    before_action :set_target_board, only: %i[show edit update destroy]

    def index
        @boards = Board.page(params[:page])
    end

    def new
        @board = Board.new #boardモデルからインスタンスを発行している。
        # binding.pry
    end

    def create
       board = Board.create(board_params)
       flash[:notice] = "「#{board.title}」の掲示板を作成しました。"
       redirect_to board
        # binding.pry
    end

    def show
    end

    def edit
    end

    def update
        @board.update(board_params)
        redirect_to @board
    end

    def destroy
        @board.delete
        redirect_to boards_path, flash: { notice: "「#{@board.title}」の掲示板を削除しました。"}
    end


    private

    def board_params
        params.require(:board).permit(:name, :title, :body)
    end

    def set_target_board
        @board = Board.find(params[:id])
    end
end

index.html

<div class="d-flex align-items-center">
    <h1>掲示板一覧</h1>
    <div class="ml-auto boards_linkBox">
        <%= link_to '新規作成',new_board_path, class: 'btn btn-outline-dark' %>
    </div>
</div>
<% if flash[:notice] %>
    <div class="alert alert-denger"><%= flash[:notice]%></div>
<% end %>
<table class="table table-hover boards_table">
    <thead class="thead-dark">
        <tr>
            <th>ID</th>
            <th>タイトル</th>
            <th>作成者</th>
            <th>作成日時</th>
            <th>更新日時</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <% @boards.each do |board| %>
        <tr>
            <th><%= board.id %></th>
            <td><%= board.title %></td>
            <td><%= board.name %></td>
            <td><%= board.created_at.to_s(:datetime_jp) %></td>
            <td><%= board.updated_at.to_s(:datetime_jp) %></td>
            <td><%= link_to '詳細', board, class: 'btn btn-outline-dark' %></td>
            <td><%= link_to '削除', board, class: 'btn btn-outline-dark', method:  :delete %></td>
        </tr>
        <% end %>
    </tbody>
</table>

<%= paginate @boards%>　<%# kaminari gem で用意されたヘルパーメソッド%>

Comments

[flogcode]

javascriptはどのように読み込んでいますか?
ソースコードのどこかに `javascript_pack_tag` や `javascript_pack_tag` などの記述があればそれです

[Kantan.lab]

ありがとうございます。

javascriptのpathは,
`app/javascript/paks/application.js`

内容は、
```ここに言語を入力
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
```

です。

Answer 1

JavaScriptがビューのテンプレートHTML側から読み込めていない。というケースがよくあるようなのでそちらを確認した方がよいと思います。

拝見したところ Webpacker を使っているようですね。

views/layouts/application.html.erb というファイルに

<%= javascript_pack_tag 'application' %>

のような記述はありますか?

Comments

[Kantan.lab]

ありがとうございます！治りました！

というのは、
当初rails6を立ち上げたときに、

views/layouts/application.html.erb
`<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>`

が邪魔して起動できませんでした。※コメントアウトして起動できた。

そして後ほど調べたところ
`gem "webpacker"`が必要とわかりインストールしご指摘いただいた上記の記述を再度記載した後、削除ができるようになりました。

助かりました、私自身Webpackerを理解していませんでした。

勉強します。

改めてありがとうございました。

Answer 2

ありがとうございます。

javascriptのpathは,
app/javascript/paks/application.js

内容は、

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

です。