Rails AJAX response_to不獲取JavaScript

Question

我正在嘗試實現其他一些討論中討論的AJAX Acts_As_Votable更新，但是由於某些原因，當我發送AJAX請求更新投票計數時，format.js似乎沒有觸發。

應該發生的是圖像改變了，但是沒有改變。 沒有任何變化，頁面也沒有更新。

不過，投票計數有效，如果刷新頁面可以看到投票，但是upvote.js.erb和downvote.js.erb文件根本沒有運行。 因此，它正在后端運行，應該更改視圖的js文件似乎並未運行。

我嘗試了常見的解決方案，例如不渲染布局並更改response_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（在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，但是綁定ajax:success事件的代碼實際上尚未在客戶端中執行，因此瀏覽器不知道如何處理JS響應。

首先，您需要在常規JS代碼（ application.js或JS結構的其他適當部分）中為ajax:success注冊事件處理程序。 然后，您可以決定eval服務器批發的響應-然后只包含進行文本替換的代碼-甚至決定返回一個JSON結構，其中包含適合您用例的數據（為簡單起見，使用“喜歡”和“不喜歡”按鈕的圖片網址）。

Answer 2

好的，根據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之一）：

$("#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");

一切似乎都正常！