Ruby on rails 使用follow/unfollow按钮对用户分页:Ajax由于类名重复而遇到问题
My users/show.html.erb页面工作正常,因为每个页面上只显示一个类名。当用户在Ruby on rails 使用follow/unfollow按钮对用户分页:Ajax由于类名重复而遇到问题,ruby-on-rails,ajax,pagination,Ruby On Rails,Ajax,Pagination,My users/show.html.erb页面工作正常,因为每个页面上只显示一个类名。当用户在users/index.html.erb和follow/unfollow按钮中分页时,relationship/js.create.erb和relationship/js.destroy.erb会变得古怪,因为页面上有重复的类名,(无论跟随/取消跟随哪个用户,第一个分页的用户都会更新,这仅在刷新页面时修复自身(实际模型仍能正常工作)) 我没有在users/index.html.erb中使用unfoll
users/index.html.erb
和follow/unfollow按钮中分页时,relationship/js.create.erb
和relationship/js.destroy.erb
会变得古怪,因为页面上有重复的类名,(无论跟随/取消跟随哪个用户,第一个分页的用户都会更新,这仅在刷新页面时修复自身(实际模型仍能正常工作))
我没有在users/index.html.erb
中使用unfollow/follow部分,因为index.html.erb中没有@user
变量,它对@users进行分页,所以我使用user.id
class RelationshipsController < ApplicationController
before_action :logged_in_user
def create
@user = User.find(params[:followed_id])
current_user.follow(@user)
respond_to do |format|
format.html { redirect_to @user }
format.js
end
end
def destroy
@user = Relationship.find(params[:id]).followed
current_user.unfollow(@user)
respond_to do |format|
format.html { redirect_to @user }
format.js
end
end
end
**relationships/create.js.erb**
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %> <br> followers');
**relationships/destroy.js.erb**
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
$("#followers").html('<%= @user.followers.count %> <br> followers');
**users/index.html.erb**
<div class="row community">
<% @users.in_groups_of(3, false).each do |users| %>
<div class="col-sm-12">
<% users.each do |user| %>
<ul class="name-head">
<% unless current_user == user %>
<div id="follow_form">
<% if current_user.following?(user) %>
<%= form_for(current_user.active_relationships.find_by(followed_id: user.id),
html: { method: :delete }, remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-primary" %>
<% end %>
<% else %>
<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag :followed_id, user.id %></div>
<%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>
<% end %>
</div>
<% end %>
</ul>
<div class="col-xs-12">
<div class="col-xs-4">
<a href="<%= following_user_path(user.id) %>">
<center><strong id="following" class:"stat">
<%= user.following.count %><br>
following
</strong></center>
</a>
</div>
<div class="col-xs-4">
<a href="<%= followers_user_path(user.id) %>">
<center><strong id="followers" class="stat">
<%= user.followers.count %><br>
followers
</strong></center>
</a>
</div>
<div class="col-xs-4">
<center><strong id="photo-count" class="stat">
<%= user.photos.count %><br>
photos shared
</strong></center>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
<%= will_paginate %>
**users/show.html.erb**
.
.
.
<li class="follow">
<%= render 'follow_form' if logged_in? %>
</li>
</ul>
</div>
<div class="col-xs-12">
<div class="col-xs-4">
<a href="<%= following_user_path(@user) %>">
<center><strong id="following" class:"stat">
<%= @user.following.count %><br>
following
</strong></center>
</a>
</div>
<div class="col-xs-4">
<a href="<%= followers_user_path(@user) %>">
<center><strong id="followers" class="stat">
<%= @user.followers.count %><br>
followers
</strong></center>
</a>
</div>
<div class="col-xs-4">
<center><strong id="photo-count" class="stat">
<%= @user.photos.count %><br>
photos shared
</strong></center>
</div>
end
**_follow_form.html.erb**
<% unless current_user?(@user) %>
<div id="follow_form">
<% if current_user.following?(@user) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
</div>
<% end %>
**_follow.html.erb**
<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag :followed_id, @user.id %></div>
<%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>
**_unfollow.html.erb**
<%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
html: { method: :delete },
remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-primary" %>
<% end %>
及
问题在于你的关系/js.create.erb
和关系/js.destroy.erb
部分,因为你的代码只更新页面中的第一个#follow form
div(即你报告的第一个用户的#follow form
)
您应该将users\index.html.erb
更改为
<% unless current_user == user %>
<div id="follow-form-<%= user.id %>">
和relationship/js.destroy.erb
相应地,那么你应该让一切都按预期工作。我复制了你的代码,在添加了下面的修改后,它工作得非常好。(也就是说,我不需要重新加载页面来更改“Follow/Unfollow”按钮)
请尝试以下操作以查看其是否有效:
users/index.html.erb(此处仅显示相关代码,即“Follow/”Unfollow“按钮)
用户/_follow_form.html.erb
users/\u unfollow.html.erb
用户/_follow.html.erb
关系/create.js.erb
$(“#follow_form-”).html(“”);
关系/destroy.js.erb
$(“#follow_form-”).html(“”);
请注意
的使用。可选哈希局部变量:{……}
允许您将局部变量传递给要渲染的部分(\u partial.html.erb
),在这种情况下,您还需要在要渲染的部分名称之前添加partial:
这样,您的user
局部变量将不仅在users/index.html.erb
中可用,而且在上面列出的其他文件中也可用。这不起作用。您只是复制了我上面写的内容,除了添加了一个破折号,这不会改变代码,这与我上面写的内容相同。请例如,请深入查看我的答案:我还将用户id添加到了div id中,这就是您的代码不起作用的原因。请参见问题的部分……”编辑:我考虑将用户id传递到类中,例如:“当您提交“post”/“delete”时,您能提供rails控制台所说的内容吗“通过单击按钮“follow”向关系控制器发出请求”?创建/销毁操作是否作为JS而不是HTML处理?我找到了解决方案。我将在一分钟后发布答案:)谢谢这对index.html.erb有效,但是现在show.html.erb坏了。我刚刚为show.html.erb创建了一个单独的部分“follow”表单“show”。现在一切都正常了。lol现在表单没有在user/show.html.erb模式中呈现,但是模型仍然正常。我猜模式有问题,因为页面上有两美元(“#follow_form-”),一个在模式后面…好的,我解决了这个问题,只需在create/destroy文件中添加另一行代码,该文件包含modal的父元素,因此类似$(“li.follow>#follow_form——
I have tried many combinations such as:
$("#follow_form<%="#{user.id}"%>").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#follow_form<%= @user.id%>").html("<%= escape_javascript(render('users/unfollow')) %>");
Started DELETE "/relationships/360" for 184.90.97.154 at 2016-05-13 20:05:17 +0000
Processing by RelationshipsController#destroy as JS
Rendered users/_follow.html.erb (1.6ms)
(1.1ms)[0m [1mSELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."follower_id" WHERE "relationships"."followed_id" = $1[0m [["followed_id", 1]]
Started POST "/relationships" for 184.90.97.154 at 2016-05-13 20:07:26 +0000
Processing by RelationshipsController#create as JS
[1m[36m (1.5ms)[0m [1mCOMMIT[0m
<% unless current_user == user %>
<div id="follow-form-<%= user.id %>">
$("#follow-form-<%= @user.id %>").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %> <br> followers');
<ul class="name-head">
<% unless current_user == user %>
<%= render partial: 'follow_form', locals: { user: user } %>
<% end %>
</ul>
<div id="follow_form-<%= user.id %>">
<% if current_user.following?(user) %>
<%= render partial: 'unfollow', locals: { user: user } %>
<% else %>
<%= render partial: 'follow', locals: { user: user } %>
<% end %>
</div>
<%= form_for(current_user.active_relationships.find_by(followed_id: user.id), html: { method: :delete }, remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn-default" %>
<% end %>
<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag :followed_id, user.id %></div>
<%= f.submit "Follow", class: "btn" %>
<% end %>
$("#follow_form-<%= @user.id %>").html("<%= escape_javascript(render(partial: 'users/unfollow', locals: { user: @user })) %>");
$("#follow_form-<%= @user.id %>").html("<%= escape_javascript(render(partial: 'users/follow', locals: { user: @user })) %>");