javascript - AJAX 调用正在处理但未在 Rails View 中呈现

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();
  });    
});

Controller 创建操作按设计运行，并使用以下渲染指令。

  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') %>');但新创建的 caritem 并未刷新 div。

哪里出了问题？

更新

尝试通过将 _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

我可能是错的，但我注意到在 Controller 中您将本地变量传递给 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) %>');