

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

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

# 問題のソースコード

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

[code]

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

destroy.js.erb

[code]

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

ビューファイル

[code]

    <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>
    
[/code]

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

[code]

    <% 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 %>
    
[/code]

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

ユーザーに関するモデル

[code]

    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
    
[/code]

動画投稿に関するモデル

[code]

    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
    
[/code]

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

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

movie_like.rb

[code]

    class MovieLike < ApplicationRecord
        belongs_to :user
        belongs_to :movie
    end
    
[/code]

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

[code]

    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
    
    
[/code]

movies_controller

[code]

    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
    
[/code]

以上です


CC BY-SA 4.0
2021-04-02T09:23:08.120
75042
2022-07-21T06:07:30.660
2021-04-03T04:45:40.000
3060
40506
question
javascript ruby-on-rails mysql
非同期通信を用いたいいね機能が実装できない。

[code]

    <tr id="post_<%= post.id %>">
    　　<%= render 'post', post: post %>
    </tr>
    
[/code]

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


CC BY-SA 4.0
2021-04-07T11:13:02.200
75146
2021-04-07T11:13:02.200
40506
75042
answer