Javascript 使用ajax在rails中呈现跟随/取消跟随按钮

我已经实现了follow/unfollow功能，并希望向其中添加AJAX调用，但我被卡住了。 我的follow/unfollow部分_follow_button.html.erb在用户->索引上呈现，如下所示：

<% if current_user.id != user.id %>    

    <% if !current_user.following?(user) %>
        <%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
            <div><%= hidden_field_tag :followed_id, user.id %></div>
            <span class="follow"><%= f.submit "Follow User", class: "btn btn-primary btn-sm" %></span>
        <% end %>
    <% else %>
        <%= form_for(current_user.active_relationships.find_by(followed_id: user.id),
                        html: { method: :delete }, remote: true) do |f| %>
            <span class="unfollow"><%= f.submit "Unfollow User", class: "btn btn-secondary btn-sm" %></span>
        <% end %>
    <% end %>

<% end %>

class RelationshipsController < ApplicationController

  respond_to :js, :json, :html
  def create
        user = User.find(params[:followed_id])
       @follow = current_user.follow(user)
  end

  def destroy
        user = Relationship.find(params[:id]).followed 
        @unfollow = current_user.unfollow(user)
  end

end

<div class="col-5" style="margin-left: -5px;">
    <%= render '/components/follow_button', :user => User.find_by_username(params[:id]) %>
</div>

---

“我的视图”文件夹结构包含子文件夹、用户和关系。它们都有单独的控制器，我试着添加了简单的警报功能'alert（“Works”）；'到这两个子文件夹中的create.js.erb，尝试将它们与控制器匹配，但似乎都不起作用。这是我的第一个Rails项目，我不太明白这个问题可能是什么。有什么建议吗？

调用部分跟随/取消跟随

<% if current_user.id != user.id %>
  <%= render partial: 'follow_links', locals: { user: user }
<% end %>

$('.follow-user').on("click",function() {
  follow_unfollow($(this), "follow")
});

$('.unfollow-user').on("click",function() {
  follow_unfollow($(this), "unfollow")
});

function follow_unfollow(target, what_to_do)
  url = target.attr('data-url')
  followee = target.attr('data-followee')
  if (what_to_do == "follow") {
    other_button = $('.unfollow-user[data-followee="'+followee+'"]')
  } else {
    other_button = $('.follow-user[data-followee="'+followee+'"]')
  }

  $.ajax( {
    url: url,
    type: 'post',
    success: function() {
      // Hide this link
      target.addClass('hidden');
      // Show the other link
      other_button.removeClass('hidden');
    },
    error: function(ret) {
      alert(ret.responseJSON.error);
    }
  });

};

控制器中的更改。

<% 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. You should use the path to the controller that will create or destroy the relationship -->
<%= 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 } %>

class RelationshipsController < ApplicationController
  def create
    user = User.find(params[:followed_id])
    @follow = current_user.follow(user)

    respond_to do |format| 
      if @follow.valid?
        format.html
        format.json: { render json: @follow }
        return
      else
        format.html
        format.json: { render json: { :error => 'Follow failed', :status_code :not_found } }
      end
    end
  end

  def destroy
    user = Relationship.find(params[:id]).followed 
    @unfollow = current_user.unfollow(user)

    respond_to do |format| 
      if @unfollow.valid?
        format.html
        format.json: { render json: @unfollow }
      else
        format.html
        format.json: { render json: { :error => 'Unfollow failed', :status_code :not_found } }
      end
    end
  end
end

类关系控制器'Follow failed'，：状态\u代码：not\u found}
结束
结束
结束
def销毁
user=Relationship.find（params[：id]）。后跟
@unfollow=当前用户。unfollow（用户）
回应做什么|格式|
如果@unfollow.valid？
format.html
format.json:{render json:@unfollow}
其他的
format.html
format.json:{render json:{:error=>'Unfollow failed'，：状态\代码：not\找到}
结束
结束
结束
结束

---

忠告 一个建议，也是关于您的最后一个建议：我建议您为自己创建一个良好的调试环境，而不是在StackOverflow上发布关于调试代码的问题

或者是一个很好的起点，但是在正确使用这些代码之前，您需要理解您正在使用的代码。我建议深入阅读这真的帮助我掌握了诀窍，理解了Rails和ajax的数据流

我认为，这将打破我自己长期被束缚的牢不可破的Stackoverflow循环：

loop do
  puts "Try code"
  sleep 1000
  puts "Arrhh! an error!"
  sleep 1000
  puts "Posting on Stackoverflow"
  sleep 1000
  puts "Waiting for answer"
  sleep 1000
end 

---

我希望你能弄明白

你是基思吗？几乎是同样的问题，不到一天后。不管怎样，我给基思贴了一个答案，我认为它能更好地解决这个问题。不使用表格也不提交。在这种情况下，你可以很容易地应用它。不，我不是基思。。。但我会看看这个答案，虽然我需要编辑所有内容，但希望它能工作，看看它，似乎很多，我仍然会尝试解决这个问题，因为功能已经工作，只有渲染或切换或类似的问题，也许jQueryI真的认为你只需要一些修改：）我根据我在另一个问题上的答案发布了一个改进的（我认为）答案我已经检查了发布的问题背后的功能，似乎create.js.erb和destroy.js.erb甚至没有被调用，我假设在我的关系控制器或其他方面需要做一些事情。好的，我会尝试实现这个功能。我理解你的建议，但这是我的第一个Rails项目，我正在学习。当然，如何使用JS是必须的，因为除了Rails之外，这也是我正在学习的东西。我还有很长的路要走！

loop do
  puts "Try code"
  sleep 1000
  puts "Arrhh! an error!"
  sleep 1000
  puts "Posting on Stackoverflow"
  sleep 1000
  puts "Waiting for answer"
  sleep 1000
end