正在处理 AJAX 调用，但未在 rails 视图中呈现答案

【问题标题】：AJAX call being handled but not rendering in rails view正在处理 AJAX 调用，但未在 rails 视图中呈现
【发布时间】：2020-03-14 09:59:41
【问题描述】：

在 rails 4.2 应用程序中，div 列出并呈现现有的购物车

  <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 未使用新创建的卡项刷新。

这是哪里出了问题？

更新

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

【问题讨论】：

为什么不在javascript控制台打印数据，看看是否按预期获取数据？
我有。倒数第二段“XHR 响应负载正在返回 $("div#yield_cartitem").html(''); “现在我也尝试了警报，请参阅更新的问题。

标签： javascript ruby-on-rails ajax

【解决方案1】：

我可能错了，但我注意到在控制器中您将本地人传递给 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) %>');

【讨论】：

【解决方案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 将自动呈现它

【讨论】：