Ruby on Rails使用Ajax進行渲染

Question

我正在一個簡單的網站上工作，該網站上有以歌曲形式發布的帖子，現在實現了“喜歡”和“不喜歡”功能，但是當我單擊“喜歡/不喜歡”時，它會在所有帖子上顯示喜歡/不喜歡的次數。 當我重新加載頁面時，它使它們恢復正常。 現在，我希望僅更改該特定職位的人數，而不會影響其他職位的人數嗎？

我對帖子的看法：

<div class="col-6">
    <% for @s in @songs %>
    <div class="card border-secondary mb-1">
        <div class="card-header">
            <div class="col-1">
                <%= image_tag User.find(@s.user_id).user_image.url, :size=>"50x50" %>
            </div>
            <div class="col-11 text-muted">
                <a href="/user/<%= User.find(@s.user_id).username %>" class="info-col">
                    <%= User.find(@s.user_id).username %>                           
                </a> 
                - <%= @s.created_at.to_formatted_s(:short) %>
            </div>
        </div>
        <div class="card-body">
        <h4 class="card-title">
            <a href="<%= song_path(@s) %>" class="link-col"><%= @s.title %></a>
        </h4>
        <p class="card-text"><%= simple_format(@s.content) %></p>
        </div>

        <div class="card-footer text-muted">
            <div class="col-12">
                <div class="row">

                    <div class="col-3" id="song_like">
                        <%= render '/components/song_like' %>
                    </div>

                    <div class="col-3" id="song_dislike">
                        <%= render '/components/song_dislike' %>
                    </div>

                    <div class="col-4" id="song_comment">
                        <%= render '/components/song_comment' %>
                    </div>

                </div>
            </div>
        </div>

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

song_like部分具有以下代碼：

    <%= link_to like_song_path(@s.id, like: true), remote: true, method: :post do %>
    <i class="fa fa-thumbs-o-up fa-lg" aria-hidden="true"></i> &nbsp <span class="songlikes">
        <%= @s.thumbs_up_total %>
    </span>        
<% end %>

song_dislike部分具有以下代碼：

<%= link_to like_song_path(@s.id, like: false), method: :post, remote: true do %>
    <i class="fa fa-thumbs-o-down fa-lg" aria-hidden="true"></i> &nbsp <span class="songdislikes">
        <%= @s.thumbs_down_total %>
    </span>  
<% end %>

我的“喜歡”控制器就像：

def like
@s = Song.find(params[:id])
@like = Like.create(like: params[:like], user: current_user, song: @s)

respond_to do |format| 
if @like.valid?
    format.html
    format.js
else
    format.html
    format.js
  end
end

結束

這就是like.js.erb的樣子：

    $('.songlikes').html("<%=  @s.thumbs_up_total %>");

$('.songdislikes').html("<%=  @s.thumbs_down_total %>");

這是routes.rb文件的一部分：

resources :songs do
  member do
    post 'like'
  end
end

我假設在渲染或jquery上存在一些問題，但無法弄清楚。 您有指示嗎？

Answer 1

編輯：您應該在您的f.html中刪除redirect_to ？

這將重新加載頁面-因此js無法正常工作。

根據定義，Ajax調用不會重新加載頁面。

如果刪除這些行，然后嘗試以下操作：

---

jQuery中沒有新數據。

您需要一個全局屬性，以便視圖可以從您的控制器中找到數據。

例如：

@like = ...

然后，在您的視圖中，您可以添加要渲染的本地：

$("#song_like").load("<%=j render partial: '/components/song_like', locals: {like: @like} %>");

但是 ，您需要將您的部分更改為部分。 並將變量更改為like以便將其以正確的方式呈現。

希望能幫助到你！

更新

如果您想播放一首特定的歌曲，可以將其與each首歌曲一起渲染，然后為帖子的班級分配一個ID

例如：

<% @posts.each do |post| %>
  <div class="post-content">
    ... other stuff ...
    <div class="likes like-post-<%= post.id %>">
       .. number of likes
    </div> 
    <%= link_to "Like", link_route_path(post) %>
  </div>
<% end %>


# controller 
# So you can use the id in your js view

@id = params[:id]   

# view.js
$(".like-post-" + "<%= @id %>").html("<%=  @s.thumbs_up_total %>"); 

希望這個想法有所幫助。

Answer 2

像這樣更改渲染：

<div class="col-3" id="song_like">
 <%= render partial: '/components/song_like', locals: {s: @s, like: true} %>
</div>

然后部分：

<%= link_to like_song_path(s.id, like: like), method: :post, remote: true do %>
    <i class="fa fa-thumbs-o-up fa-lg" aria-hidden="true"></i> &nbsp <%= s.thumbs_up_total %>        
<% end %>

並在like_song的控制器中

應該定義

@s= Song.find(params[:id])
like = Like.create(like: params[:like], user: current_user, song: @song)
@like = !like.like # opposite to your current status

其余的事情都很好，然后放在like.js.erb中

$('#songs_like').html("<%= escape_javascript(render partial: '/components/song_like', locals: { s: @s, like: @like } ) %>")