0

やりたいこととしては、非同期通信を用いたいいね機能を実装したい(動画投稿ページに)
ポートフォリオの概要としては、動画を投稿する専用のページとツイート専用のページを分けています。
投稿一覧ページに飛ぶことができるようになったのですが、非同期通信が動かなくなってしまいました。

こちらは動画のURLです。
https://gyazo.com/33390355c75c2a7d6a17ed0878109781

問題のソースコード

非同期処理を書いたコード
create.js.erb

document.getElementById('like_<%= @movie.id %>').innerHTML = '<%= j(render @movie) %>'

destroy.js.erb

document.getElementById('like_<%= @movie.id %>').innerHTML = '<%= j(render @movie) %>'

ビューファイル

<div class="content-wrapper">
    <div class="content-block">
        <% @movies.each do |movie| %>
        <div class="content">
         <div class="user-about">
             <div class="image">
             <% if movie.user.image.attached? %>
             <%= image_tag movie.user.image %>
                <% else %>
            <%= image_tag no.user.png %>
                <% end %>
             </div>

         <div class="profile">
            <div class="name-history">
                <div class="name">

                <%= movie.user.nickname %>


                </div>
                <div class="mania-histry">
                    <%= "学習歴:#{movie.user.mania_histry}年" %>
                </div>
             </div>
             
             <div class="enjoy-point">
             <%= "楽しいポイント#{movie.user.enjoy_point}"%>
             </div>
         </div>
       </div>
       
       <div class="text">
       <p>タイトル: <%= movie.title %></p> <br>
       <p>説明: <%= movie.introduction %></p>
       <div class = 'video'>
       <video src=<%= rails_blob_path(movie.movie) %> type="movie/mp4", controls></video>
       </div>
    </div>
       
         <div class="action-menu">

            <tr id="post_<%= movie.id %>">
            <%= render 'like',movie: movie %> 
            </tr>
             <div class="comment">
                <%if user_signed_in?%>
                <h3>コメント件数: <%= movie.comments.count %></h3>
                <%= link_to "コメントする",  "/movies/#{movie.id}", class: "comment-buttom" %>
                <% else %>
                <h3>コメント件数: <%= movie.comments.count %></h3>
                <%= link_to "コメントを見る", "/movies/#{movie.id}", class: "comment-buttom" %>
                <% end %>
            </div>
                
            <div class="user-action">
            <%if user_signed_in?%>
            <% if current_user.id == movie.user.id || user_signed_in %>
            <%= link_to "編集", edit_movie_path(movie) %>
            <%= link_to "削除", movie_path(movie), method: :delete %>
            <% end %>
            <% end %>
            </div>
         </div>

        </div>
        <% end %>

    </div>
    <div class="sidebar">
     <div class="box">

     </div>
     <div class="box">
         
    </div>
    </div>
</div>

ビューファイルの部分テンプレート

<% if user_signed_in? %>
             <div class="like">
             <h3>いいね件数: <%= post.likes.count %></h3>
             <div class = 'like-button'>
             <% if current_user.liked_by?(post.id) %>
                <td><%= link_to 'いいねを外す', destroy_like_path(post), class: "like-link", method: :DELETE, remote: true %></td>
                <i class="fa fa-heart unlike-btn"></i>
            <% else %>
                <td><%= link_to 'いいね', create_like_path(post), class: "like-link", method: :create, remote: true %></td>
                <i class="fa fa-heart like-btn"></i>

             <% end %>

            </div>
            </div>
            <% end %>

ここからはモデルについて書いていきます

ユーザーに関するモデル

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
    
  has_one_attached :image
  has_many :posts
  has_many :likes
  has_many :comments, dependent: :destroy
  has_many :movie_likes
  has_many :movies
  
 
  def liked_by?(post_id)
    likes.where(post_id: post_id).exists?
  end

  def movie_liked_by?(movie_id)
    movie_likes.where(movie_id: movie_id).exists?
  end

  with_options presence: true do
    validates :nickname
    validates :mania_histry
    validates :enjoy_point
    validates :email
    validates :password, length: { minimum: 6 }

  end

  validate :image_presence

  def image_presence
    if image.attached?
      if !image.content_type.in?(%('image/jpeg image/png'))
        errors.add(:image, 'にはjpegまたはpngファイルを添付してください')
      end
    end
  end
end

動画投稿に関するモデル

class Movie < ApplicationRecord
  has_one_attached :movie
  has_many :liked_users, through: :likes, source: :user
  has_many :comments, dependent: :destroy
  belongs_to :user
  has_many :movie_likes

  with_options presence: true do
        validates :title
        validates :introduction
        validates :movie

    end

    validate :movie_presence

    def movie_presence
      if movie.attached?
        if movie.content_type.in?(%('movie/mp4 movie/mov'))
          errors.add(:movie, 'にはmp4またはmovファイルを添付してください')
        end
      else
        errors.add(:movie, 'ファイルを添付してください')
      end
    end 
end

いいね機能に関するモデル

補足:
今回いいね機能を実装するにあたって、「ツイートを投稿する部分のいいね機能」 (like.rb) と「動画投稿に関する部分のいいね機能」 (movie_like.rb) を分けており、それはコントローラーも同じです。

movie_like.rb

class MovieLike < ApplicationRecord
    belongs_to :user
    belongs_to :movie
end

いいね機能に関するコントローラー

class MovieLikesController < ApplicationController
  before_action :movie_params

  def create
    MovieLike.create(user_id: current_user.id, movie_id: params[:id])
    redirect_to movies_path
  end

  def destroy
    MovieLike.find_by(user_id: current_user.id, movie_id: params[:id]).destroy
    redirect_to movies_path
  end

  def movie_params
    @movie = Movie.find(params[:id])
  end
end

movies_controller

class MoviesController < ApplicationController
        before_action :authenticate_user!, only: [:new, :update, :create, :edit, :update, :destroy]
        before_action :find_movie, only: [:edit, :update, :show, :destroy]
      
          def index
              @movies= Movie.all.order(id: "DESC")
              @movie_like = MovieLike.new
      
            end
      
            def new
              @movie = Movie.new
      
            end
      
          def show
              @comment = Comment.new     
              @comments = @movie.comments.order(id: "DESC")
          end
          
          def create
            @movie = current_user
            @movie = Movie.create(movie_params)
            if @movie.save
              redirect_to movies_path,notice:'投稿に成功しました'
              else
                redirect_to new_movie_path,notice:'投稿に失敗しました'
              end
          end
          
            def edit  
            end
      
            def update
              @movie.update(movie_params)
              redirect_to movies_path
            end
      
            def destroy
              if @movie.destroy
                redirect_to movies_path,alert: '投稿を削除しました'
              else
                redirect_to movies_path
              end
            end
      
            private
      
              def movie_params
                params.require(:movie).permit(:title, :introduction, :movie).merge(user_id: current_user.id )
              end
      
              def find_movie
                @movie = Movie.find(params[:id])
              end
      
              def force_redirect_unless_my_movie
                return redirect_to movies_path,alert:'権限がありません'if @movie.user != current_user
              end
      
end

以上です

2
  • Movies#index ってなってるので redirect_to movies_path でとばされたあとの Movies Controller をみないとわからないかも
    – user35303
    Commented 2021年4月2日 12:39
  • アドバイス有難うございます。確かにそうですね。追記しておきます。
    – user40506
    Commented 2021年4月2日 23:51

1 件の回答 1

1
<tr id="post_<%= post.id %>">
  <%= render 'post', post: post %>
</tr>

のtrをdivに変えたら実装できました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。