javascript - Rails AJAX respond_to 未恢复 JavaScript

Question

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

应该发生的情况是图像发生了变化，但事实却没有。没有任何变化，页面也不会更新。

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

我已经尝试了常见的解决方案，例如不渲染布局和更改respond_to中的顺序，但似乎没有任何方法可以使其工作。

知道出了什么问题吗？

代码如下:

Controller 操作

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(在views/lists文件夹中)

$('.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") %>);

});

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

Answer 1

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

目前发生的情况是，您正在渲染 JS，但绑定(bind) ajax:success 事件的代码从未在客户端中实际执行过，因此浏览器不知道该怎么做与 JS 响应。

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