使用AJAX的Ruby on Rails更新列表打破了顺序

Ruby on Rails updating list with AJAX breaks order

本文关键字：列表 顺序 更新 Rails AJAX Ruby on 使用      更新时间：2023-09-26

我有一个按一定顺序排列的元素列表。问题是，当我用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代码，都在这里，所以没有其他排序标准。

由于没有答案，我给你一个主意…

,

首先，您必须记住，对于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没有对数据做任何愚蠢的事情。如果数据顺序正确，则应按要求追加。
相关文章：