javascript - 使用 Ajax on Rails 4 关注/取消关注

Question

我已经尝试实现 Ajax 一段时间了，但未能完全完成该过程。

我可以毫无问题地将它发布到数据库，但是我在处理一切的 JavaScript 方面遇到了问题，更具体地说，向已关注的人显示 unfollow 按钮和 follow 按钮给刚刚取消关注的人。

查看 - artists/show.html.erb

<% if fan_signed_in? && current_fan.following_artist?(@artist) %>
  <%= button_to "unfollow", artist_relationship_path, method: :delete, remote: true, class: "exchange" %>
<% else %>
  <%= form_for(ArtistRelationship.new,  url: artist_relationships_path, remote: true) do |f| %>
    <%= hidden_field_tag :artist_id, @artist.id %>
    <%= f.submit "follow", class: "exchange" %>
  <% end %>
<% end %>

Controller - artists/relationships_controller.rb

before_action :authenticate_fan!
respond_to :html, :js

def create
  @relationship = ArtistRelationship.new
  @relationship.fan_id = current_fan.id
  @relationship.artist_id = Artist.friendly.find(params[:artist_id]).id
  if @relationship.save
    redirect_to (:back)
  else
    redirect_to root_url
  end
end

def destroy
  current_fan.unfollow_artist(Artist.friendly.find(params[:id]))
  redirect_to (:back)
end

查看 - artists/relationships.js.erb

// I am lost here. I have no idea at all what goes in this file.

我也不知道我的 Controller 是否正确处理了请求。我只是从我一直关注的教程中获取的。

任何帮助都会...帮助 =]

编辑以回应 beartech 的回答我可以单击关注，它会成功发布到数据库，但 View 不会更新。刷新页面后，关注按钮会显示为取消关注，反之亦然。

我的日志显示 ActionView::MissingTemplate(缺少模板 artists/relationships/create)，这是有道理的，因为没有像在 artists/show.html.erb 上那样为关系创建 View 。

我几乎可以肯定 Controller 中的某些东西在响应 JavaScript 时无法正常工作。

Answer 1

您的 JS 文件只需要包含将按钮链接从一种状态更改为另一种状态的代码。由于您有 if/then 语句来确定要显示的内容，因此您可以将它放在一个 div 中并让 JS 更新该 div。

首先你需要能够在你的 Controller 中响应JS:

艺术家/relationships_controller.rb:

def create
  @relationship = ArtistRelationship.new
  @relationship.fan_id = current_fan.id
  @relationship.artist_id = Artist.friendly.find(params[:artist_id]).id
  if @relationship.save
      respond_to do |format|
      format.html { redirect_to(:back) }
      format.js {render :action => "follow_button" }
    end
  else
    redirect_to root_url
  end
end

def destroy
  current_fan.unfollow_artist(Artist.friendly.find(params[:id]))
  respond_to do |format|
    format.html { redirect_to(:back) }
    format.js {render :action => "follow_button" }
  end
end

将您的按钮代码包装在一个 div 中:

艺术家/show.html.erb:

<div class='follow_button'>
<% if fan_signed_in? && current_fan.following_artist?(@artist) %>
  <%= button_to "unfollow", artist_relationship_path, method: :delete, remote: true, class: "exchange" %>
<% else %>
  <%= form_for(ArtistRelationship.new,  url: artist_relationships_path, remote: true) do |f| %>
    <%= hidden_field_tag :artist_id, @artist.id %>
    <%= f.submit "follow", class: "exchange" %>
  <% end %>
<% end %>
</div.

现在在你的 JS 文件中:

艺术家/follow_button.js.erb:

$('#follow_button').html('<%= escape_javascript(render :partial => 'follow_button') %>');

部分代码:

艺术家/_follow_button.html.erb:

<% if fan_signed_in? && current_fan.following_artist?(@artist) %>
  <%= button_to "unfollow", artist_relationship_path, method: :delete, remote: true, class: "exchange" %>
<% else %>
  <%= form_for(ArtistRelationship.new,  url: artist_relationships_path, remote: true) do |f| %>
    <%= hidden_field_tag :artist_id, @artist.id %>
    <%= f.submit "follow", class: "exchange" %>
  <% end %>
<% end %>

您可能需要调整路径以满足您的需要。

AJAX 的生命周期是:

:远程调用controller -> 响应JS -> JS文件执行。