変更ボタンが押せなくなる不具合

Question

前提・実現したいこと

家庭での簡単な在庫管理を作っています。
商品（名前、ジャンル、しまう場所、賞味期限、個数の要素）を登録し、一覧できるようにしてあります。
商品を買い足したときに個数だけ簡単に変更できるように一覧にて個数の要素だけ変更できるようにしました。

発生している問題・エラーメッセージ

今の問題はsubmitボタンを押し、変更ができるときと変更できないときがあります。
ページを更新した直後は個数を設定し、submitボタンを押すと変更できます。
例えば、ここから商品登録のページに飛び、また、一覧に戻ると個数を設定しsubmitボタンを押したとしても変更出来ません。
エラーメッセージは特に出ず、変更ができなくなるだけです。
更新すればまた変更可能になります。

該当のソースコード

ruby on railsにて開発しています。

//views/items/index.html.erb

<%= render "layouts/header" %>
<table class="table table-bordered">
  <tbody>
  <th>カテゴリー</th>
  <% @categories.each do |category| %>

    <th><%= link_to category.name, category_path(category) %></th>
  <% end %>
  </tbody>
  <tbody>
  <th>場所</th>
  <% @places.each do |place| %>

    <th><%= link_to place.name, place_path(place) %></th>
  <% end %>

  </tbody>
</table>
<div>

  <h2>商品一覧（全<%= @items.count %>件）</h2>


  <table class="table  table-inverse">
    <thead>
    <tr>
      <th>名前</th>
      <th>ジャンル</th>
      <th>場所</th>
      <th>賞味期限</th>
      <th>個数</th>
    </tr>
    </thead>
    <% @items.each do |item| %>
      <tbody>
      <tr>
        <td><%= item.name %></td>

        <% category = Category.find(item.category_id) %>
        <td><%= category.name %></td>

        <% place = Place.find(item.place_id) %>
        <td><%= place.name %></td>
        <td><%= item.expiration_date %></td>
//ここからが一覧にて個数変更できるように設定してあります
        <%= form_for(item, url: item_path(item), method: :patch) do |f| %>

          <td><%= item.count %>個

            <%= f.select :count, (1..200) %>
            <%= f.submit "変更する" %>
        <% end %></td>
//ここまでです
        <td><%= link_to '消去', item_path(item), method: :delete %></td>
      </tr>
      </tbody>

    <% end %>
</div>

//controllers/items_controllers.rb

class ItemsController < ApplicationController
  def new
    @item = Item.new

  end
//ここが商品一覧のコントローラー設定です
  def index
    @categories = Category.all
    @places = Place.all
    @items = Item.order("expiration_date")
  end

  def show
    @item = Item.find(params[:id])
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      redirect_to items_path
    else
      render :new
    end
  end

  def edit
    @item = Item.find(params[:id])
  end

  def update
    @item = Item.find(params[:id])

    if @item.update(item_params)
      redirect_to items_path
    else
      render :index
    end

  end

  def destroy
    item = Item.find(params[:id])
    item.destroy
    redirect_to items_path

  end

  private

  def item_params
    params.require(:item).permit(:name, :count, :category_id, :place_id, :expiration_date)
  end
end

updateした際のログ

Started PATCH "/items/11" for ::1 at 2020-07-25 08:53:57 +0900
Processing by ItemsController#update as HTML
  Parameters: {"authenticity_token"=>"sKpW0JCpsJ9CLnxq6y6mmfzNyH4w3lgeRnbcUnx9TtkaJcI616KUClaxzKZyyNRuzilG4ZwaqKlmIdf97dNwAw==", "item"=>{"count"=>"14"}, "commit"=
>"変更する", "id"=>"11"}
  Item Load (0.5ms)  SELECT "items".* FROM "items" WHERE "items"."id" = ? LIMIT ?  [["id", 11], ["LIMIT", 1]]
  ↳ app/controllers/items_controller.rb:31:in `update'
   (0.1ms)  begin transaction
  ↳ app/controllers/items_controller.rb:33:in `update'
  Item Update (0.9ms)  UPDATE "items" SET "count" = ?, "updated_at" = ? WHERE "items"."id" = ?  [["count", 14], ["updated_at", "2020-07-24 23:53:57.818845"], ["id"
, 11]]
  ↳ app/controllers/items_controller.rb:33:in `update'
   (14.7ms)  commit transaction
  ↳ app/controllers/items_controller.rb:33:in `update'
Redirected to http://localhost:3000/items
Completed 302 Found in 28ms (ActiveRecord: 16.2ms | Allocations: 3392)


Started GET "/items" for ::1 at 2020-07-25 08:53:57 +0900
Processing by ItemsController#index as HTML
  Rendering items/index.html.erb within layouts/application
  Rendered layouts/_header.html.erb (Duration: 0.2ms | Allocations: 104)
  Category Load (0.3ms)  SELECT "categories".* FROM "categories"
  ↳ app/views/items/index.html.erb:5
  Place Load (0.2ms)  SELECT "places".* FROM "places"
  ↳ app/views/items/index.html.erb:12
   (1.6ms)  SELECT COUNT(*) FROM "items"
  ↳ app/views/items/index.html.erb:21
  Item Load (0.3ms)  SELECT "items".* FROM "items" ORDER BY expiration_date
  ↳ app/views/items/index.html.erb:34
  Category Load (0.2ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = ? LIMIT ?  [["id", 4], ["LIMIT", 1]]
  ↳ app/views/items/index.html.erb:41
  Place Load (0.2ms)  SELECT "places".* FROM "places" WHERE "places"."id" = ? LIMIT ?  [["id", 6], ["LIMIT", 1]]
  ↳ app/views/items/index.html.erb:44
  Category Load (0.4ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = ? LIMIT ?  [["id", 3], ["LIMIT", 1]]
  ↳ app/views/items/index.html.erb:41
  Place Load (0.3ms)  SELECT "places".* FROM "places" WHERE "places"."id" = ? LIMIT ?  [["id", 3], ["LIMIT", 1]]
  ↳ app/views/items/index.html.erb:44
  Rendered items/index.html.erb within layouts/application (Duration: 27.1ms | Allocations: 13224)
[Webpacker] Everything's up-to-date. Nothing to do
Completed 200 OK in 96ms (Views: 91.3ms | ActiveRecord: 3.5ms | Allocations: 29970)

Comments

[web_inago]

質問文が全く理解できないので、少し推敲したほうがいいと思います。
また、コードはマークダウンのcodeで囲んだほうが読んでもらえる可能性があがるので、
回答がつきやすくなると思います

[Hokatoyo]

質問へのアドバイスありがとうございます。
少し変更させていただきましたので、もしよろしければ回答していただけると幸いです。
何か情報が足りなければ指摘していただければ、追加させていただきます。

[web_inago]

ありがとうございます。
商品登録ページへ遷移して戻る、というのはブラウザバックということですか？
railsのログにはなんと表示されていますか？

[Hokatoyo]

商品登録ページからブラウザバックした際と商品登録ページから商品一覧ページのリンクをクリックした場合をどちらも試しましたが変更はされませんでした。
変更できない場合、変更ボタンを押してもログは発生しませんでした。
一覧ページにて個数変更できる場合のrailsのログを追加しました。

[Hokatoyo]

商品登録ページからブラウザバックした際と商品登録ページにある商品一覧ページへのリンクをクリックした際どちらにおいても変更ができなくなりました。
変更できない場合、個数設定し変更ボタンを押したとしてもログが発生しませんでした。
更新し変更ができる場合のログを追加させていただきました。

Answer 1

<table>は閉じてますか？ 閉じていてもなおこの現象が起きるなら、 <table>タグ中にform_forを配置しているからだと思います。 ブラウザで生成されているHTMLを見ると、submitの前にFormタグが閉じられてしまっていると思います。

<%= form_for(item, url: item_path(item), method: :patch) do |f| %>
  <table class="table  table-inverse">
　　　　　〜〜〜〜〜〜
          <td><%= item.count %>個
            <%= f.select :count, (1..200) %>
            <%= f.submit "変更する" %>
        　</td>
　　　　　〜〜〜〜〜〜
  </table>
<% end %>

のようにform_forをtableの外に出してください。

リンクから遷移すると動かない、またはリロードすると治る、というのは
誤ったHTMLの記述をしていたために、turbolinksによるbodyの差し替えが正しく行われなかったのが原因ではないでしょうか。
なので、上記のようにhtmlを修正しなくても、
商品一覧ページへのリンクのオプションにdata: { turbolinks: false }を指定してturbolinksを切れば意図した動作は行われると思います。
私自身turbolinksに関して参考元を少し読んだ程度の理解でこれを書いています。
もう少し深く理解し次第追記したいと思いますが、詳しい方いらっしゃればご指摘いただきたいです。

参考URL

Comments

[Hokatoyo]

真摯に回答ありがとうございます。
解決しました。

[web_inago]

自分の勉強のために、どの解決方法で意図した動作をしたか知りたいです。

[Hokatoyo]

気づかず返信遅くなり申し訳ありません。
<table>タグの後ろが閉じられていない点が原因でした。
form_forに関しては外に出さなくても意図した動作をしました。