正在處理 AJAX 調用但未在 Rails 視圖中呈現

Question

在 rails 4.2 應用程序中，div 列出並呈現現有的 caritems

  <div id='yield_cartitem'>
    <%= render 'cartitems' %>
  </div>

並且同一頁面有表格（每個列出的產品一個）。

<%= form_for(@cartitem, remote: true, id: 'data-js-cartitem-form', data: {'js-cartitem-form' => true}) do |f| %>

  <%= f.hidden_field :product_id, value: product.id %>
  <%= f.hidden_field :price, value: product.price %>
  <%= f.submit 'Add to cart' %>
<% end %>

該類的 javascript 通過 jQuery 定義

$(document).on('turbolinks:load', function() {
  $('[data-js-cartitem-form]').on("ajax:success", function(event, data, status, xhr){
    var cartitem = $(xhr.responseText).hide();
    $('#cartitems').append(cartitem);
    cartitem.fadeIn(1000);
    document.getElementById('data-js-cartitem-form').reset();
  });

  $('#cartitems').on("ajax:success", function(event, data, status, xhr){
    var cartitem_id = xhr.responseJSON.id;
    $('[data-js-cartitem-id=' + cartitem + ']').hide();
  });    
});

控制器創建操作按設計運行，具有以下渲染指令。

  if @cartitem.save
    render partial: 'cartitem', locals: {cartitem: @cartitem}
  end

_cartitems.html.erb有

<div id=cartitems class='tableize'>
  <%= render partial: 'cartitem', collection: @cartitems %>
</div>

而_cartitem.html.erb定義

<div class='row' data-js-cartitem-id=<%= cartitem.id %>>
 <%= cartitem.quantity %>
 <%= cartitem.um %>
 <%= cartitem.product.try(:name) %>
 <%= cartitem.price %>
</div>

_cartitem.js.erb調用$("div#yield_cartitem").html('< %=j (render 'cartitem') %>');

XHR 響應負載返回$("div#yield_cartitem").html('< %=j (render 'cartitem') %>'); 但是 div 沒有用新創建的 caritem 刷新。

這是哪里出錯了？

更新

試圖通過將 _cartitems.js.erb 更改為警報來簡化問題：

alert("<%= cartitem.quantity %> <%=j cartitem.um %> <%=j cartitem.product.try(:name) %> <%= number_to_currency(cartitem.price) %> Added")

警報確實有效地呈現。

alert("1.0 kg Prod 1,89 € Added")

Answer 1

我可能是錯的，但我注意到在控制器中，您將 locals 傳遞給cartitem html 部分，但不在js.erb文件中。 所以在cartitem.js.erb文件中這樣做：

$("div#yield_cartitem").html('< %=j (render 'cartitem', cartitem: cartitem) %>');

調試js.erb文件真的很難，但這是可能的。 嘗試使用 gem pry查看局部中的上下文和變量。

$("div#yield_cartitem").html('<%= binding.pry; j(render 'cartitem', cartitem: cartitem) %>');

Answer 2

$("div#yield_cartitem").html('<%=j (render 'cartitem') %>')這將替換#yield_cartitem的內容

改為使用$('#cartitems').append('<%= j render('cartitem', cartitem: @cartitem) %>')

並更新此功能

$('[data-js-cartitem-form]').on("ajax:success", function(event, data, status, xhr){
  // var cartitem = $(xhr.responseText).hide();
  // $('#cartitems').append(cartitem);
  // cartitem.fadeIn(1000);
  document.getElementById('data-js-cartitem-form').reset();
});

另外將_cartitem.js.erb重命名為create.js.erb然后create將自動呈現它