AJAX вызов обрабатывается, но не отображается в режиме рельсов

Question

В приложении 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 не обновляется вновь созданным cartitem.

Где это пошло не так?

update

Попытка упростить ситуацию, изменив _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

$("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 автоматически отрендерит его

Answer 2

Возможно, я ошибаюсь, но заметил, что в контроллере вы передаете локальные данные в 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) %>');