Ruby on Rails使用Ajax进行渲染 [英] Ruby on Rails on rendering with Ajax

问题描述

我正在一个简单的网站上工作，该网站具有以歌曲形式发布的帖子，现在我实现了喜欢和不喜欢功能，但是当我单击喜欢/不喜欢时，它将显示所有帖子的喜欢/不喜欢次数.当我重新加载页面时，它使它们恢复正常.现在，我希望它仅更改该特定职位的人数，而不影响其他职位的人数?

I am working on a simple website which has posts in forms of songs, now I have implemented like and dislike feature, but when I click on like/dislike it renders the numbers of likes/dislikes on all posts. And when I reload the page it returns them to normal. Now I would like it to change only the numbers for that particular post, without affecting the numbers on other posts?

我对帖子的看法:

<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部分具有以下代码:

The song_like partial has the following code:

    <%= 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部分具有以下代码:

The song_dislike partial has the following code:

<%= 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 %>

我的喜欢"控制器就像:

And my 'like' controller is like:

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的样子:

This is how like.js.erb looks like:

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

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

这是routes.rb文件的一部分:

Here is the part of routes.rb file:

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

我假设在渲染或jquery上存在一些问题，但无法解决.您有任何指示吗?

I am assuming there is some issue on rendering or jquery, but can't figure it out. Do You have any instructions?

推荐答案

您应该删除f.html中的redirect_to吗?

这将重新加载页面-因此js将无法正常工作.

根据定义，Ajax调用不会重新加载页面.

如果删除这些行并尝试以下操作:

You should remove the redirect_to in your f.html?

This reloads the page - and the js will therefore not work.

An Ajax call is per definition not reloading the page.

If you remove those lines and try the following:

您的jQuery中没有新数据.

There's no new data in your jQuery.

您需要一个全局属性，以便该视图可以从您的控制器中找到数据.

You need a global attribute, so the view can find the data from your controller.

例如:

@like = ...

然后在您的视图中可以添加要渲染的本地文件:

Then in your view you can add a local to be rendered:

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

但是，您需要将部分内容更改为部分内容.并将变量更改为like，以便将其以正确的方式呈现.

But, you need to change your partial to be a partial. And change the variable to like so it will be rendered in the right way.

希望有帮助！

如果您想播放特定的歌曲，可以使用each进行渲染，然后为帖子的班级分配一个ID

If you want to hit a specific song you can render it with each and then assign an id to your post's class

例如:

<% @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 %>"); 

希望这个想法会有所帮助.

Hope the idea helps.

这篇关于Ruby on Rails使用Ajax进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！