Question

我一直在尝试实施Ajax一段时间，并且没有成功完成整个过程。

我可以将它发布到数据库没有问题，但是我遇到了JavaScript方面的问题，更具体地说是向已经关注的人显示unfollow按钮并且follow按钮一个刚刚取消关注的人。

Veiw - 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 %>

控制器 - 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.

我也不知道我的控制器是否正确处理了请求。我刚刚从我一直关注的教程中学到了这一点。

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

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

我的日志说ActionView :: MissingTemplate（缺少模板艺术家/关系/创建）是有道理的，因为没有关系的创建视图，因为它是在artists / show.html.erb上完成的。

我几乎肯定控制器中的某些东西在响应JavaScript时无法正常工作。

Answer 1

您的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 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中并使JS更新为div。

首先，您需要能够在控制器中响应JS：

艺术家/ relationships_controller.rb：

<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.

将您的按钮代码包裹在div中：

艺术家/ show.html.erb：

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

现在在你的JS文件中：

艺术家/ follow_button.js.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 %>

部分代码：

艺术家/ _follow_button.html.erb：

function makeTable() {
    var fragment = document.createDocumentFragment();

    for (var i = 0; i < 1000; i++) {
        var row = document.createElement('tr');
        fragment.appendChild(row);

        for (var j = 0; j < 20; j++) {
            var cell = document.createElement('td');
            cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString()));
            row.appendChild(cell);
        }
    }

   var target = document.getElementById('target');
   target.appendChild(fragment);
};

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

AJAX的生命周期是：

：远程调用控制器 - ＆gt;回应JS - ＆gt; JS文件被执行。

使用Ajax on Rails跟踪/取消关注4

1 个答案: