Javascript 按钮不存在'；t在用户索引页面上的Ajax更新-Rails教程4

TLDR：试图在用户索引操作中添加follow/unfollow按钮，但单击该按钮时，什么也没有发生

我已经学习了Michael Hartl的Rails教程应用程序，现在它已经完成，我想为Follow/Unfollow按钮添加额外的功能。当前，您只能在通过“用户显示操作”访问用户的个人资料页面后跟踪/取消跟踪用户。我已尝试将此功能扩展到用户控制器的索引页，以便在索引视图中，不必访问每个用户的配置文件页来跟踪/取消跟踪他们，而是在他们的姓名旁边还会显示一个跟踪按钮

最初用于“用户显示操作”上的“跟随/取消跟随”按钮的代码：

用户\u controller.rb

class RelationshipsController < ApplicationController
  before_action :signed_in_user

  def create
    @user = User.find(params[:relationship][: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

show.htlm.erb供用户查看

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

_遵循_form.htlm.erb partial供用户查看

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

---

_follow.html.erb部分用户视图

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

---

_unfollow.html.erb部分用户视图

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

---

在“我的关系”视图中创建.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= @user.followers.count %>')

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= @user.followers.count %>')

$（“#follow_form”）.html（“”）
$（“#followers”）.html（“”）

---

在“我的关系”视图中销毁.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= @user.followers.count %>')

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= @user.followers.count %>')

$（“#follow_form”）.html（“”）
$（“#followers”）.html（“”）

---

用户视图中的index.html.erb

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

---

_user.html.erb用户视图内部的部分

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

| 

我尝试了几种不同的方法，但到目前为止都没有结果

首先，我尝试简单地将follow_form partial呈现在_userpartial中，就像在user Show视图中一样

_user.html.erb用户视图内部的部分

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

<%= form_for(current_user.relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>

  <%= render @users %>

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>

    <%= render 'follow_form' if signed_in? %>

这导致了以下错误：Users中的NoMethodError#索引“nil:NilClass的未定义方法'id'”，并在follow#u表单部分中点亮了以下代码行

<% if current_user.following?(@user) %>

---

在处理变量和控制器几个小时后，我终于设法在索引页面上正确显示按钮，并在_user.html.erb部分中使用以下代码

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>
    <% if current_user.following?(user) %>
      <%= form_for(@current_user.relationships.find_by(followed_id: @users),
             html: { method: :delete },
             remote: true) do |f| %>
        <%= f.submit "Unfollow", class: "btn btn-large" %>
      <% end %>
    <% else %>
      <%= form_for(current_user.relationships.build(followed_id: @users),
             remote: true) do |f| %>
        <div><%= f.hidden_field :followed_id %></div>
      <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
      <% end %>
    <% end %>
</li>

| 

但是，此代码仅为每个用户显示正确的跟随/取消跟随按钮，但当您单击按钮时，不会发生任何事情。我还尝试用以下代码编辑JS文件

create.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#user").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= @user.followers.count %>')

    var indexed_form = "follow_form_<%=@user.id%>"
    if ( document.getElementById(indexed_form) ){
        var jquery_indexed_form = "#" + indexed_form
        $(jquery_indexed_form).html("<%= escape_javascript(render('users/unfollow')) %>");
    } 
    else {
        $("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
        $("#followers").html('<%= @user.followers.count %>');
    }

$（“#follow_form”）.html（“”）
$（“#用户”）.html（“”）
$（“#followers”）.html（“”）

destroy.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#user").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= @user.followers.count %>')

$（“#follow_form”）.html（“”）
$（“#用户”）.html（“”）
$（“#followers”）.html（“”）

这没有任何效果

我越是修补代码的不同部分，它就越让我困惑。这是我的人际关系控制器

关系\u controller.rb

class RelationshipsController < ApplicationController
  before_action :signed_in_user

  def create
    @user = User.find(params[:relationship][: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

类关系控制器

---

我知道有很多，但如果有人能帮我了解一下我的情况，我将非常感激。这是我在教程之外的第一次尝试，我认为尝试将功能添加到已经在工作的项目中，而不是从头开始是一个好主意。

在

\u user.html.erb

部分中使用以下代码：

<li>
  <%= gravatar_for user, size: 52 %>
  <%= link_to user.name, user %>
  <% if current_user.admin? && !current_user?(user) %>
    | <%= link_to "delete", user, method: :delete,
                                  data: { confirm: "You sure?" } %>
  <% end %>
    <% if current_user.following?(user) %>
      <%= form_for(current_user.relationships.find_by(followed_id: user.id),
             html: { method: :delete },
             remote: true) do |f| %>
        <%= f.submit "Unfollow", class: "btn btn-large" %>
      <% end %>
    <% else %>
      <%= form_for(current_user.relationships.build(followed_id: user.id),
             remote: true) do |f| %>
        <div><%= f.hidden_field :followed_id %></div>
      <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
      <% end %>
    <% end %>
</li>

| 

我在

表单_中对
方法调用的两处代码进行了更改：

@当前用户
应该是
当前用户

其次，
followed\u id:@users
应该
followed\u id:user.id
以防有人在这个问题上仍然在寻找正确的Ajax代码。这适用于现有控制器，不需要更改任何其他内容

create.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#user").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= @user.followers.count %>')

    var indexed_form = "follow_form_<%=@user.id%>"
    if ( document.getElementById(indexed_form) ){
        var jquery_indexed_form = "#" + indexed_form
        $(jquery_indexed_form).html("<%= escape_javascript(render('users/unfollow')) %>");
    } 
    else {
        $("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
        $("#followers").html('<%= @user.followers.count %>');
    }

var index\u form=“follow\u form”
if（document.getElementById（索引表单））{
var jquery_index_form=“#”+index_form
$（jquery索引表单）.html（“”）；
} 
否则{
$（“#follow_form”）.html（“”）；
$（“#followers”）.html（“”）；
}

destory.js.erb

    var indexed_form = "follow_form_<%=@user.id%>"
    if ( document.getElementById(indexed_form) ){
        var jquery_indexed_form = "#" + indexed_form
        $(jquery_indexed_form).html("<%= escape_javascript(render('users/follow')) %>");
    }
    else {
        $("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
        $("#followers").html('<%= @user.followers.count %>');
    }

var index\u form=“follow\u form”
if（document.getElementById（索引表单））{
var jquery_index_form=“#”+index_form
$（jquery索引表单）.html（“”）；
}
否则{
$（“#follow_form”）.html（“”）；
$（“#followers”）.html（“”）；
}

_user.html.erb

    <div class="col-md-2">
          <% unless current_user?(user) %>
            <% form_id = user.id.to_s %>

              <div id="follow_form_<%= form_id %>">
                <% 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" %>
            <% 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 %>

</div>



这是我的第一篇文章。耶！希望它能帮助别人
 这个问题属于TLDR的范畴。你能不能把它弄得既精确又紧凑。我在帖子顶部添加了一个tldr。我只是想彻底地记录下我解决问题的所有步骤。我想我真的不知道如何使它更紧凑，而不觉得我遗漏了一些可能是问题的一部分或有助于提出解决方案。你的意图是正确的，但为了得到你问题的答案，我认为精确会有所帮助。因为这是TLDR，所以人们倾向于跳过TLDR问题。只在问题中添加相关信息。当有人询问时，你可以分享额外的信息