いいね機能実装時、Ajax機能が作動しないため解決策をおしえてほしいです

Question

###はじめに
いいね機能実装時のエラーが解決できないので質問させていただきます。

参考にさせていただいたサイトはhttps://techtechmedia.com/favorite-function-rails/このサイトです。

エラーがよく理解できないのでそちらを教えて欲しいのと、どのようにすれば解決するかおしえてほしいです。

いいねのリンクを押したら検証ツールで下記のエラーが出ます。
###エラー文

POST http://localhost:3000/like/7 500 (Internal Server Error)
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax @ rails-ujs.js:216

rails-ujs

if (xhr.readyState === XMLHttpRequest.OPENED) {
          return xhr.send(options.data);⇦⇦⇦⇦⇦ここのコードで赤いバツが出てる
        }

###自分で行ったこと
変数の受け渡しが間違っているかと思い、変数名を変更してみたがなにもかわらなかった

###コード

routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: "items#index"

  resources :items, only: [:index, :new, :create, :show, :edit, :update] do
    collection do 
      get 'post','search','modal'
    end
  end

  resources :profiles, only: [:show, :new, :edit, :create, :update] do
    member do 
      get 'show_user'
    end
  end

  post 'like/:id' => 'likes#create', as: 'create_like'
  delete 'like/:id' => 'likes#destroy', as: 'destroy_like'
end

user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
             
  VALID_PASSWORD_REGEX = /\A(?=.*?[a-z])(?=.*?\d)[a-z\d]{6,20}+\z/i.freeze
  validates :password, presence: true
  validates :password, format: { with: VALID_PASSWORD_REGEX }, allow_blank: true

  has_many :items
  has_one :profile, dependent: :destroy
  has_many :likes, dependent: :destroy
  has_many :like_items, through: :likes, source: :item

  def liked_by?(item_id)
    likes.where(item_id: item_id).exists?
  end

end

like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :item
end

index.html.erb

<% @items.each do |item| %>
  <tr id="item_<%= item.id %>">
    <%= render "shared/item", item: item %>
  </tr>
<% end %>

_item.html.erb

  <div class='item-contents'>
    <div class = 'timeline'>
      <div class = 'timeline-column'>
        <div class = 'image-field'>
          <%= image_tag(item.image , class:'timeline-image') %>
        </div>
  
        <div class = 'item-body'>
          <div class = 'item-body-contents'>
  
            <div class= 'item-profile'>
              <div class= 'item-profile-icon'>
              <% if item.profile.image.present? %>
              <%= link_to image_tag(item.profile.image, class:'mini-image') , "/profiles/#{item.profile.id}/show_user" %>
              <% else %>
              <span class= 'image-text' >NO IMAGE</span>
              <% end %>
              </div>
              <div class= 'item-profile-name'>
                <p class= 'mini-name'>
                <%= item.profile.name %>
                </p>
              </div>
              <% if current_user.liked_by?(item.id) %>
                <td><%= link_to 'いいねを外す', destroy_like_path(item), method: :DELETE, remote: true %><%= item.likes.count %></td>
              <% else %>
                <td><%= link_to 'いいね', create_like_path(item), method: :POST, remote: true %><%= item.likes.count %></td>
              <% end %>
              <% if item.user_id == current_user.id %>
                <div class = 'item-option'>
                    <div class = 'item-option-btn' >
                      <%= link_to('#', class: 'option-btn') do%>
                      <%= image_tag 'gear_icon.png' ,class: 'item-btn-icon'%>
                      <% end %>
                    </div >
                </div>
              <% end %>
            </div>
            
            <div class = 'item-detail'>
              <p class = 'detail-title'>Title</p>
              <p class = 'detail-message'>
              <%= item.title %>
              </p>
            </div>
  
            <div class = 'item-detail'>
              <p class = 'detail-title'>Category</p>
              <p class = 'detail-message'>
              <%= item.category.name %>
              </p>
            </div>
  
            <div class = 'item-detail-tag'>
              <p class = 'detail-title'>Tag</p>
              <p class = 'detail-message'>
              <% unless item.tags.empty? %>
              <% item.tags.each do |tag| %>
                #<%=tag.tag_name %>
              <%end %>
              <% else %>
              未記入
              <% end %>
              </p>
            </div>
  
            <div class = 'item-information'>
              <p class = 'detail-title'>Information</p>
              <p class = 'detail-message-information'>
              <% unless item.information.empty? %>
              <%= item.information %>
              <% else %>
              未記入
              <% end %>
              </p>
            </div>

            <div class= 'post-time-box'>
            <p class= "post-time">投稿日<%= item.created_at.to_s(:datetime_jp) %></p>
            </div>
  
          </div>
        </div>
        
      </div>
    </div>
  </div>

likes_controller.rb

class LikesController < ApplicationController
  before_action :item_params

  def create
    Like.create(user_id: current_user.id, item_id: params[:id])
  end

  def destroy
    Like.find_by(user_id: current_user.id, item_id: params[:id]).destroy
  end

  private

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

create.js.erb

document.getElementById("item_<%= @item.id %>").innerHTML = '<%= j(render @item) %>'

destroy.js.erb

document.getElementById('item_<%= @item.id %>').innerHTML = '<%= j(render @item) %>'

Comments

[neko_daisuki]

いいねをクリックした後に rails の方でエラーは出ていませんか？
rails server と打つ画面です。

[koukinagano]

```
Started POST "/like/7" for ::1 at 2021-03-06 21:02:35 +0900
Processing by LikesController#create as JS
Parameters: {"id"=>"7"}
Item Load (0.3ms) SELECT `items`.* FROM `items` WHERE `items`.`id` = 7 LIMIT 1
↳ app/controllers/likes_controller.rb:15:in `item_params'
User Load (0.3ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 6 ORDER BY `users`.`id` ASC LIMIT 1
↳ app/controllers/likes_controller.rb:5:in `create'
(0.1ms) BEGIN
↳ app/controllers/likes_controller.rb:5:in `create'
Like Create (7.2ms) INSERT INTO `likes` (`user_id`, `item_id`, `created_at`, `updated_at`) VALUES (6, 7, '2021-03-06 12:02:35.162757', '2021-03-06 12:02:35.162757')
↳ app/controllers/likes_controller.rb:5:in `create'
(0.5ms) COMMIT
↳ app/controllers/likes_controller.rb:5:in `create'
Rendering likes/create.js.erb
Rendered likes/create.js.erb (Duration: 0.7ms | Allocations: 984)
Completed 500 Internal Server Error in 17ms (ActiveRecord: 8.4ms | Allocations: 6137)

ActionView::Template::Error (Missing partial items/_item with {:locale=>[:ja], :formats=>[:js, :html, :text, :css, :ics, :csv, :vcf, :vtt, :png, :jpeg, :gif, :bmp, :tiff, :svg, :mpeg, :mp3, :ogg, :m4a, :webm, :mp4, :otf, :ttf, :woff, :woff2, :xml, :rss, :atom, :yaml, :multipart_form, :url_encoded_form, :json, :pdf, :zip, :gzip], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}. Searched in:
* "/Users/naganokouki/projects/Old_fashion/app/views"
* "/Users/naganokouki/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/devise-4.7.3/app/views"
* "/Users/naganokouki/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actiontext-6.0.3.4/app/views"
* "/Users/naganokouki/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actionmailbox-6.0.3.4/app/views"
):
1: document.getElementById("item_<%= @item.id %>").innerHTML = '<%= j(render @item) %>'
app/views/likes/create.js.erb:1
```
このような状態でした、記述が間違っているのでしょうか
回答よろしくお願いします

Answer 1

create/destroy.js.erb の下記の部分で items/_item が見つからないとエラーになってます。

<%= j(render @item) %>

_item.html.erb は存在するようですが、これは shared/_item.html.erb でしょうか。
その場合は以下のどちらかをお試しください。

1. shared/_item.html.erb を items/_item.html.erb に移動する

index.html.erb も shared/item と指定している部分を items/item に変更する必要があります。

2. create/destroy.js.erbを以下に変更する

<%= j(render partial: "shared/item" locals: { item: @item }) %>

Comments

[koukinagano]

ありがとうございます！

[koukinagano]

実装したところエラーの解決をすることができました。

Answer 2

xhrは使い勝手が悪いのでfetchに切り替えてみてください

いいね押す→バックグラウンドでapi叩く→データ修正しつついいねの状態をjsonで返す→jsonをみていいねボタンを変更

Comments

[koukinagano]

rails-ujsのファイルが検索しても出てこない場合は、fetchにへんこうすることはできませんか？
変更する方法を知っていましたら教えて欲しいです。