Ruby on Rails 使用 AJAX 更新列表中断顺序

Question

我有一个按特定顺序排列的元素列表。问题是当我用 AJAX 更新任何元素时，这个元素会跳到列表的底部。当我重新加载页面时，它会返回正确的位置。更新时我希望这个元素留在原处。

名单：

<div class="shopping-cart">
  <%= render "shopping_cart" %>
</div>

_shopping_cart.html.erb：

<% @order_items.each do |order_item| %>
    <%= render 'carts/cart_row', order_item: order_item %>
<% end %>

_cart_row.html.erb：

<%= form_for order_item, remote: true do |f| %>
    <%= f.number_field :quantity, class: "form-control cart-quantity" %>
    <%= f.submit "Submit", class: "btn" %>
<% end %>

update.js.erb：

$(".shopping-cart").html("<%= escape_javascript(render 'carts/shopping_cart') %>")

任何想法为什么会发生这种情况？谢谢。

更新

控制器代码：

@order_items = current_order.order_items.order("created_at ASC")

并且不再有任何 AJAX 代码，都在这里，因此没有其他排序标准。

Answer 1

由于没有答案，我给你一个想法......

--

首先，您必须记住，对于 Ajax 调用，问题是将是 Ajax 的附加，或者是 Rails 的数据。

我立即推测您的问题是您只是将新数据附加到您的视图中。你已经很好地处理了你拥有的代码；这可能是您的 @order_items 数组的问题。

这是我要做的：

update.js.erb:
$(".shopping-cart").html("<%=j render 'carts/shopping_cart' %>")

_shopping_cart.html.erb:
<% render 'carts/cart_row', collection: @order_items, as: :order_item %>

控制器代码：

@order_items = current_order.order_items.order :created_at

没有区别？

当然。

调试的方式会是这样的：

1. 检查@order_items 对象（使用浏览器开发控制台中的network 选项卡）或Rails 记录器中
2. 检查 JS 没有对数据做任何愚蠢的事情。如果数据排序正确，则应按要求附加。