如何通过 jquery 渲染 rails 表单？

Question

我正在尝试将关注和取消关注表单呈现到 Rails 视图中

Create.js.erb（我的问题在这里，因为这是错误的代码只作用于 CSS 而不是 rails 表单，我似乎无法处理它 D:)

$('.btn-danger').attr('class', 'btn')
                   .val('Following')
                   .attr('id', 'btn-unfollow');

destroy.js.erb（这也是错误的代码只作用于 CSS，而不是 rails 表单）

$('.btn').attr('class', 'btn-danger')
                   .val('unfollowed')
                   .attr('id', 'btn-follow');

我的 Postsindex.html.erb

<% @posts.each do |f| %>
<%= f.headline %>
<%- f.text %> 
    <% if current_user.id != f.user.id %>
    <% if !current_user.following?(f.user) %>
    <%= form_for(current_user.active_relationships.build, remote: true) do |s| %>
      <div> <%= hidden_field_tag :followed_id, f.user.id %> </div>
      <%= s.button "follow", class: "btn btn-danger", id: "follow-btn" %>
      <% end %>
      <% else %>
      <%= form_for(current_user.active_relationships.find_by(followed_id: f.user.id), :html => {method: :delete}, remote: true) do |s| %>
      <%= s.button "unfollow", class: "btn", id: "unfollow-btn", remote: true %>
      <% end %>
      <% end %>
      <% end %>

<% end %>

帖子控制器：

class PostsController < ApplicationController
 def new
    @post = Post.new
  end
def index
@posts = post.all
end
end

唯一的问题是关注和取消关注不是在局部，而是在同一页面上，所以如果我可以单独渲染它们，我将不胜感激......

Answer 1

我会为您的情况做如下的事情。希望您会发现该解决方案也很有帮助。

1. 创建一个单独的控制器followersController。它将处理所有关注/取消关注相关活动。 （我相信你也创建了一个模型）
2. 尝试在控制器中使用:js 响应视图
3. 所以，如果有人点击 follow 按钮，那么controller > create 方法将被点击。创建后通过呈现一个名为create.js.erb 的js 文件来更改视图并编写适当的代码。
4. 当有人点击 unfollow 按钮时，controller > destroy 方法将被点击。创建后通过呈现一个名为destroy.js.erb 的js 文件来更改视图并编写相应的代码。
5. 鉴于此，请尝试在关注/取消关注按钮中使用不同的id，以便在js文件中轻松处理selectors。

在 create.js.erb 文件中，您应该这样做：

$('#follow_button_parent_div').html("<%=j render partial: 'unfollow_button_html_file' %>")

在_unfollow_button_html_file.html.erb中，写一个带有取消关注按钮的<form></form>作为提交来销毁最近创建的关注记录。

对于销毁部分，相应地修改代码。

Answer 2

我会做这样的事情。请更改以适应您数据库中的模型和字段

帖子视图： 我会创建两个链接来关注或取消关注。只有一个可见（取决于帖子的作者以及我是否已经关注他）。这些链接将创建一个 ajax 帖子来关注/取消关注帖子的作者，并将切换链接（隐藏自己并显示另一个链接）

<% @posts.each do |post| %>
  <%= post.headline %>
  <%- post.text %> 
  <% if current_user.id != post.user.id %>
    <%= render partial: 'follow_links', locals: { user: post.user }
  <% end %>
<% end %>

部分关注链接。

<% show_follow_link   = current_user.following?(user) ? 'hidden' : '' %>
<% show_unfollow_link = current_user.following?(user) ? '' : 'hidden' %>

<!-- links to follow/unfollow have data-attributes that include the path to make the ajax post and the user to follow, that is used to find the link to show after the ajax call -->
<%= link_to 'Follow',   '#', { class: 'follow-user btn-success #{show_follow_link}', "data-url": follow_user_path(user.id), "data-followee": user.id } %>
<%= link_to 'Unfollow', '#', { class: 'unfollow-user btn-danger #{show_unfollow_link}', "data-url": unfollow_user_path(user.id), "data-followee": user.id } %>

Javascript 部分

$('.follow-user').on("click",function() {
  target = $(this)
  url = target.attr('data-url')
  followee = target.attr('data-followee')
  other_button = $('.unfollow-user[data-followee="'+followee+'"]')

  $.ajax( {
    url: url,
    type: 'post',
    success: function() {
      target.addClass('hidden');
      other_button.removeClass('hidden');
    },
    error: function(ret) {
      alert(ret.responseJSON.error);
    }
  });

});

$('.unfollow-user').on("click",function() {
  target = $(this)
  url = target.attr('data-url')
  followee = target.attr('data-followee')
  other_button = $('.follow-user[data-followee="'+followee+'"]')

  $.ajax( {
    url: url,
    type: 'post',
    success: function() {
      target.addClass('hidden');
      other_button.removeClass('hidden');
    },
    error: function(ret) {
      alert(ret.responseJSON.error);
    }
  });

UsersController（关注和取消关注的新方法）

def follow
  if !current_user
    render json: { :error => 'You must log in' }, :status => :unprocessable_entity
    return
  end

  who_to_follow = User.find_by id: params[:id]
  if !who_to_follow
    render json: { :error => 'User not found' }, :status => :not_found
    return
  end

  # Change user_id by the field in the relationship that links to the followee
  followee = current_user.active_relationships.create(user_id: who_to_follow.id)
  render json: who_to_follow, :status => :ok
  return
end


def unfollow

  if !current_user
    render json: { :error => 'You must log in' }, :status => :unprocessable_entity
    return
  end

  who_to_unfollow = User.find_by id: params[:id]
  if !who_to_unfollow
    render json: { :error => 'User not found' }, :status => :not_found
    return
  end

  # Change user_id by the field in the relationship that links to the followee
  unfollowee = current_user.active_relationships.find_by user_id: who_to_unfollow.id

  if !unfollowee
    render json: { :error => 'You are not  following this user' }, :status => :unprocessable_entity
    return
  end

  unfollowee.destroy
  render json: who_to_unfollow, :status => :ok
  return

end

添加路线

post  "/users/:id/follow"    => 'users#follow',   :as => :follow_user
post  "/users/:id/unfollow"  => 'users#unfollow', :as => :unfollow_user