Updating the ranking based on jquery sortable - ruby-on-rails

Question

I'm trying to update the ranking of room prices with jquery-sortable. I'm following the approach of this example https://gorails.com/episodes/sortable-drag-and-drop.
goal
The room_prices can be dragged and dropped and the goal is to update the rank accordingly.
Issue
The controller action sort is triggered everytime I move a price, but the new order/ranking seems not to be transfered correctly to the controller.
=> The index in my controller action is still the index the page started with instead of the index after the drag and drop action.
index
<div id="room-price-index" data-url="<%= sort_room_category_room_prices_path(#room_category) %>">
<% #room_prices.each do |price| %>
<%= link_to edit_room_price_path(price), id: dom_id(price) do %>
<div class="item"><%= price.name %></div>
<% end %>
<% end %>
</div>
app/assets/javascripts/room_price.js
document.addEventListener("turbolinks:load", function() {
$("#room-price-index").sortable({
update: function(e, ui) {
console.log(e)
console.log(ui)
console.log(this)
console.log($(this).sortable('serialize'));
Rails.ajax({
url: $(this).data("url"),
type: "PATCH",
data: $(this).sortable('serialize'),
});
}
});
});
output console.log(e)
=>
jQuery.Event {originalEvent: j…y.Event, type: "sortupdate", timeStamp: 7277.559999958612, jQuery112403961329860286955: true, isDefaultPrevented: ƒ, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelable: true
clientX: 783
clientY: 365
ctrlKey: false
currentTarget: document
data: null
delegateTarget: document
detail: 1
eventPhase: 3
fromElement: null
handleObj: {type: "mouseup", origType: "mouseup", data: null, guid: 30, handler: ƒ, …}
isDefaultPrevented: ƒ returnFalse()
isTrigger: 3
jQuery112403961329860286955: true
metaKey: false
namespace: ""
offsetX: 523
offsetY: 39
originalEvent: jQuery.Event {originalEvent: MouseEvent, type: "mouseup", timeStamp: 7277.559999958612, jQuery112403961329860286955: true, isDefaultPrevented: ƒ, …}
pageX: 783
pageY: 581
relatedTarget: null
result: undefined
rnamespace: null
screenX: 783
screenY: 444
shiftKey: false
target: div#acco-price-index.ui-sortable
timeStamp: 7277.559999958612
toElement: div.room-price-info
type: "sortupdate"
view: Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
which: 1
__proto__: Object
output console.log(ui)
=>
{helper: null, placeholder: jQuery.fn.init(1), position: {…}, originalPosition: {…}, offset: {…}, …}
helper: null
item: jQuery.fn.init [div.card-room-prices.ui-sortable-handle, context: div.card-room-prices.ui-sortable-handle]
offset: {top: 539.4375, left: 222}
originalPosition: {top: 533.4375, left: 15}
placeholder: jQuery.fn.init [div.card-room-prices.ui-sortable-handle.ui-sortable-placeholder, selector: "", context: undefined]
position: {top: 391.4375, left: 16.609375}
sender: null
__proto__: Object
output console.log(this)
<div id="acco-price-index" data-url="/room_categories/10/room_prices/sort" class="ui-sortable">
<a id="room_price_43" href="/room_prices/43/edit" class="ui-sortable-handle">
</a><div class="card-room-prices ui-sortable-handle"><a id="room_price_43" href="/room_prices/43/edit">
<div class="room-price-info">
<div class="room-price-info-item">ppppppp</div>
<div class="room-price-info-item">€3.00</div>
<div class="room-price-info-item"> 31-01-2020 </div>
<div class="room-price-info-item"> 6-03-2020 </div>
</div>
</a><div class="card-room-prices-actions"><a id="room_price_43" href="/room_prices/43/edit">
<!-- <div class="card-room-prices-actions-item">
<p><i class="fas fa-edit"></i> Price details </p>
</div> -->
</a><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/43">
<div class="card-room-prices-actions-item">
<p><i class="fas fa-trash"></i> delete</p>
</div>
</a> </div>
</div>
<a id="room_price_41" href="/room_prices/41/edit" class="ui-sortable-handle">
</a><div class="card-room-prices ui-sortable-handle" style=""><a id="room_price_42" href="/room_prices/42/edit">
<div class="room-price-info">
<div class="room-price-info-item">fdsfsdfdsf</div>
<div class="room-price-info-item">€5.00</div>
<div class="room-price-info-item"> 15-12-2019 </div>
<div class="room-price-info-item"> 31-12-2019 </div>
</div>
</a><div class="card-room-prices-actions"><a id="room_price_42" href="/room_prices/42/edit">
<!-- <div class="card-room-prices-actions-item">
<p><i class="fas fa-edit"></i> Price details </p>
</div> -->
</a><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/42">
<div class="card-room-prices-actions-item">
<p><i class="fas fa-trash"></i> delete</p>
</div>
</a> </div>
</div><div class="card-room-prices ui-sortable-handle"><a id="room_price_41" href="/room_prices/41/edit">
<div class="room-price-info">
<div class="room-price-info-item">Rob II</div>
<div class="room-price-info-item">€5.00</div>
<div class="room-price-info-item"> 15-12-2019 </div>
<div class="room-price-info-item"> 31-12-2019 </div>
</div>
</a><div class="card-room-prices-actions"><a id="room_price_41" href="/room_prices/41/edit">
<!-- <div class="card-room-prices-actions-item">
<p><i class="fas fa-edit"></i> Price details </p>
</div> -->
</a><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/41">
<div class="card-room-prices-actions-item">
<p><i class="fas fa-trash"></i> delete</p>
</div>
</a> </div>
</div>
<a id="room_price_42" href="/room_prices/42/edit" class="ui-sortable-handle">
</a>
</div>
console.log($(this).sortable('serialize'));
room_price[]=43&room_price[]=41&room_price[]=42
controller
def sort
params[:room_price].each_with_index do |id, index|
binding.pry
# id => "43"
# index => "0"
# RoomPrice.where(id: id) => [#<RoomPrice:797987897 .....rank:1>]
RoomPrice.where(id: id).update_all(rank: index + 1)
binding.pry
# id => "43"
# index => "0"
# RoomPrice.where(id: id) => [#<RoomPrice:797987897 .....rank:1>]
end
skip_authorization
head :ok
end

Answer 1

Found the error, I thought I properly wrapped all my price items, but I accidentally also included some items that were not price items. Thanks all you guys for the help.