0

我正在尝试实现 AJAX Acts_As_Votable 更新，正如其他一些讨论中所讨论的那样，但由于某种原因，当我发送 AJAX 请求以更新投票计数时，format.js 似乎没有触发。

应该发生的是图像发生变化，但事实并非如此。没有任何变化，页面也没有更新。

不过，投票计数正在运行，如果我刷新页面，我可以看到它，但是 upvote.js.erb 和 downvote.js.erb 文件根本没有运行。所以它在后端工作，应该改变视图的 js 文件似乎没有运行。

我已经尝试了常见的解决方案，比如不渲染布局和更改respond_to 中的顺序，但似乎没有任何效果。

知道有什么问题吗？

这是代码：

控制器动作

def upvote
  @list.upvote_by current_user
  respond_to do |format|
    format.html { redirect_to :back }
    format.js
  end
end

def downvote
  @list.downvote_by current_user
  respond_to do |format|
    format.html { redirect_to :back }
    format.js
  end
end

看法

<div id="upvote" class="like"> <!-- Upvote div! -->
  <%= link_to upvote_list_path(@list), method: :put, class: "btn btn-default btn-sm like", remote: true do %>
    <div id="upvote-button">
      <% if user_signed_in? and current_user.voted_up_on? @list %>
        <%= image_tag("upvote-selected.svg") %>
      <% else %>
        <%= image_tag("upvote-not-selected.svg") %>
      <% end %>
    </div>
    <div id="upvote-count">
      <%= rating(@list) %>
    </div>
  <% end %>
</div>

<div id="downvote" class="dislike"> <!-- Downvote Div -->
  <%= link_to downvote_list_path(@list), method: :put, class: "btn btn-default btn-sm dislike", remote: true do %>
    <div id="downvote-button">
      <% if user_signed_in? and current_user.voted_down_on? @list %>
        <%= image_tag("downvote-selected.svg") %>
      <% else %>
        <%= image_tag("downvote-not-selected.svg") %>
      <% end %>
    </div>
  <% end %>
</div>
</div>

upvote.js.erb（在视图/列表文件夹中）

$('.like').bind('ajax:success', function() {

    $('#upvote-button').text(<%= image_tag("upvote-selected.svg") %>);

});

$('.dislike').bind('ajax:success', function() {

    $('#downvote-button').text(<%= image_tag("downvote-not-selected.svg") %>);

});

downvote.js.erb

$('.like').bind('ajax:success', function() {

    $('#upvote-button').text(<%= image_tag("upvote-not-selected.svg") %>);

});

$('.dislike').bind('ajax:success', function() {

    $('#downvote-button').text(<%= image_tag("downvote-selected.svg") %>);

});

任何帮助将不胜感激。谢谢！！

4

2 回答 2

2

您在这里混合了两件事：在 AJAX 调用上渲染 JS 并实际执行它。

目前发生的情况是您正在渲染 JS，但绑定ajax:success事件的代码实际上从未在客户端中执行过，因此浏览器不知道如何处理 JS 响应。

首先，您需要ajax:success在常规 JS 代码（application.js或 JS 结构的其他适当部分）中注册事件处理程序。然后，您可以只决定对eval服务器批发的响应 - 然后它只包含执行文本替换的代码 - 甚至决定返回一个 JSON 结构，其中包含适合您的用例的数据（为了保持简单，带有图像的哈希“喜欢”和“不喜欢”按钮的 URL）。

于 2016-12-23T23:07:45.800 回答
0

好的，根据 ma_il 回答中的提示，我想出了一个更简单的方法来做到这一点。我完全错过了我最初的解决方案从来没有第一次运行绑定，所以谢谢你:)。我想我可能可以通过 JSON 建议使这更简单......我只需要弄清楚这一点。

首先，我稍微更改了控制器操作，因为我不需要 HTML：

def upvote
  @list.upvote_by current_user
  respond_to do |format|
    format.js
  end
end

def downvote
  @list.downvote_by current_user
  respond_to do |format|
    format.js
  end
end

然后upvote.js.erb和downvote.js.erb文件看起来像这样（这是赞成的）：

$("#upvote-button").html("<%= escape_javascript( image_tag('upvote-selected.svg') ) %>");
$("#downvote-button").html("<%= escape_javascript( image_tag('downvote-not-selected.svg') ) %>");
$("#upvote-count").html("<%= rating(@list) %>");
$("#num-ratings").html("<%= @list.votes_for.size %> Ratings");

一切似乎都奏效了！

于 2016-12-24T21:16:12.773 回答