0W5E8fPq1EOm4yE
@0W5E8fPq1EOm4yE (Nishio)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

いいね非同期実装

解決したいこと

リロードすることなくいいね機能が使えるようにすること。

発生している問題・エラー

jqueryは用いないでJavaScriptにていいね機能を実装しています。リロードしないと表示が変わらないといった問題があります。

https://gyazo.com/9f84ea915e7f1d9d4053994ecbd895e5

該当するソースコード

create.js.erb

$('#<%= @way.id.to_s %>').html('<%= j render "ways/liked", { way: @way } %>');
destroy.js.erb

$('#<%= @way.id.to_s %>').html('<%= j render "ways/liked", { way: @way } %>');
_like.html.erb

<%= link_to(way_likes_path(@way), method: :POST, remote: true, class: "like") do %>
  <i class="btn btn-sm btn-outline-secondary">いいねを外す</i>
<% end %>```
```言語名
_liked.html.erb

<%= link_to (way_like_path(@way.id, @way.liked_by(current_user)), method: :DELETE, remote: true, class: "liked") do %>
  <i class="btn btn-sm btn-outline-secondary">いいねを外す</i>
<% end %>
<%= render "devise/shared/header" %>
 <div class="col">
      <div class="card shadow-sm">


           <% if @way.image.attached? %>
            <%= image_tag @way.image %>
           <% end %>
         <% if @way.video.attached? %>
         <video src="<%= rails_blob_path(@way.video) %>" type="video/mp4" controls></video>
         <% end %>


<div class="card-body">
          <div class="card-text">
          <%#= image_tag @way.user.image %><%= @way.user.nickname %>
          </div>
        <p>
           <p class="card-text">
             <%= @way.text %>
             </p>

             <div id="<%= @way.id.to_s %>">
           <% if @way.liked_by(current_user).present? %>
          <%= link_to(way_like_path(@way.id, @way.liked_by(current_user)), method: :DELETE, remote: true, class: "liked") do %>
            <i class="btn btn-sm btn-outline-secondary">いいねを外す</i>
          <% end %>
        <% else %>
          <%= link_to(way_likes_path(@way), method: :POST, remote: true, class: "like") do %>
            <i class="btn btn-sm btn-outline-secondary">いいね</i>
          <% end %>
        <% end %>
        </div>
</div>

    <div class="d-flex justify-content-between align-items-center">
                 <small class="text-muted"><%= l @way.created_at %></small>
     <% if user_signed_in? && current_user.id == @way.user.id %> 

     <div class="btn-group">
      <%= link_to '編集', edit_way_path, method: :get, class: "btn btn-sm btn-outline-secondary" %>
     <%= link_to '削除', way_path, method: :delete, class:'btn btn-sm btn-outline-secondary' %> 
     </div>
     <% end %>
    </div>
 </div>
  </div>

       <div class="card-body">
               <% if user_signed_in? && current_user.id == @way.user_id %>
           <%= form_with model: [@way,@waycomment], local: true do |f|%>
              <div class="field form-group">
               <%= f.label :text, "コメント" %><br />
               <%= f.text_field :text,id:"inputFile",class:"form-control" ,type:"text", id:"article_title",rows:"5" %>
              </div>
             <div class="actions text-right">
               <%= f.submit "送信する", class:"btn-default red-round-btn"  %>
              </div>
           <% end %> 
        <% else %>
        <% end %>
        <%# // ログインしているユーザーには上記を表示する %>
        <ul class="comments_lists">
         <%='コメント一覧'%>
        <% @waycomments.each do |waycomment| %>
            <li class="card-text">

               <%= @waycomment.text %>
          </li> 
               <% end %>
       </div>



class WaysController < ApplicationController
  before_action :authenticate_user!, except: [:index, :show]
  before_action :set_way, only: [:show, :edit, :update, :destroy]

  def index
    @way = Way.includes(:user).order('created_at DESC')
  end

  def new
    @way = Way.new
  end

  def create
    @way = Way.create(way_params)
    if @way.save

      redirect_to ways_path
    else
      render :new
    end
  end

  def edit
    redirect_to action: :index unless @way.user.id == current_user.id
  end

  def show
    @waycomment = Waycomment.new
    @waycomments = @way.waycomments.includes(:user)
  end

  def update
    if @way.update(way_params)
      redirect_to way_path
    else
      render :new
    end
  end

  def destroy
    if current_user.id == @way.user.id
      @way.destroy
      redirect_to ways_path
    else
      render :new
    end
  end

  private

  def way_params
    params.require(:way).permit(:name, :text, :image, :video).merge(user_id: current_user.id)
  end

  def set_way
    @way = Way.find(params[:id])
  end
end

class LikesController < ApplicationController
  def create
    @like = current_user.likes.build(like_params)
    @way = @like.way
    respond_to :js if @like.save
  end

  def destroy
    @like = Like.find_by(id: params[:id])
    @way = @like.way
    respond_to :js if @like.destroy
  end

  private

  def like_params
    params.permit(:way_id)
  end
end

自分で試したこと

・link_toメソッドにremote: trueを追記。

0

No Answers yet.

Your answer might help someone💌