【问题标题】:Follow button using AJAX only updates first div使用 AJAX 的关注按钮仅更新第一个 div
【发布时间】:2014-04-23 07:29:12
【问题描述】:

我有一个 _user.html.erb 部分,我在我的 Users#Index 操作上呈现,其中嵌入了一个表单以允许关注和取消关注每个用户。我的关系控制器中还附带了 create.js.erb 和 destroy.js.erb 文件来处理 AJAX。现在我必须刷新页面才能看到通过单击用户名旁边的“关注/取消关注”按钮所做的更改,但第一个用户的记录行为正确。

_user.html.erb

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

create.js.erb

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

destroy.js.erb

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

这是指向我的 users_controller.rb https://gist.github.com/anonymous/9608208 和我的 Relations_controller.rb https://gist.github.com/anonymous/9608284 的链接

我尝试将 div 更改为动态的,例如

<div id ="follow_form_<%= user.id %>">

但是当我像这样对 javascript 进行相同的更改时

$("#follow_form_<%= user.id %>").find.html("<%= escape_javascript(render('users/unfollow')) %>")

它似乎不起作用。

我一直在试图弄清楚如何将 user.id 属性传递到 javascript 中,但结果一落千丈。

【问题讨论】:

    标签: javascript ajax ruby-on-rails-4 railstutorial.org


    【解决方案1】:

    原来问题出在我的 _follow_form.html.erb 部分。 我不得不改变

    <div id="follow_form">
    

    <div id="follow_form_<%= @user.id %>">
    

    我以为我只需要在 _user.html.erb 中进行部分更改,但我错了。我当前的用户部分使用相同的 div id 来包含 Users#Index 视图中的按钮

    <div id ="follow_form_<%= user.id %>">
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-06
      • 1970-01-01
      相关资源
      最近更新 更多