title: Updating the ranking based on jquery sortable
body: <p>I'm trying to update the ranking of room prices with jquery-sortable. I'm following the approach of this example <a href="https://gorails.com/episodes/sortable-drag-and-drop" rel="nofollow noreferrer">https://gorails.com/episodes/sortable-drag-and-drop</a>.</p>
  
  <p><strong>goal</strong>
  The room_prices can be dragged and dropped and the goal is to update the <code>rank</code> accordingly. </p>
  
  <p><strong>Issue</strong>
  The controller action <code>sort</code> is triggered everytime I move a price, but the new order/ranking seems not to be transfered correctly to the controller. </p>
  
  <p>=> The <code>index</code> in my controller action is still the index the page started with instead of the index after the drag and drop action. </p>
  
  <p>index</p>
  
  <pre><code>&lt;div id="room-price-index" data-url="&lt;%= sort_room_category_room_prices_path(@room_category) %&gt;"&gt;
  &lt;% @room_prices.each do |price| %&gt;
    &lt;%= link_to edit_room_price_path(price), id: dom_id(price) do %&gt;
     &lt;div class="item"&gt;&lt;%= price.name %&gt;&lt;/div&gt;
    &lt;% end %&gt;
  &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app/assets/javascripts/room_price.js</p>
  
  <pre><code>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'),
        });
      }
    });
  });
  </code></pre>
  
  <p>output console.log(e)</p>
  
  <pre><code> =&gt; 
  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
  </code></pre>
  
  <p>output console.log(ui) </p>
  
  <pre><code>=&gt;
  {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
  </code></pre>
  
  <p>output console.log(this)</p>
  
  <pre><code>&lt;div id="acco-price-index" data-url="/room_categories/10/room_prices/sort" class="ui-sortable"&gt;
  
    &lt;a id="room_price_43" href="/room_prices/43/edit" class="ui-sortable-handle"&gt;
    &lt;/a&gt;&lt;div class="card-room-prices ui-sortable-handle"&gt;&lt;a id="room_price_43" href="/room_prices/43/edit"&gt;
  
      &lt;div class="room-price-info"&gt;
      &lt;div class="room-price-info-item"&gt;ppppppp&lt;/div&gt;
      &lt;div class="room-price-info-item"&gt;€3.00&lt;/div&gt;
      &lt;div class="room-price-info-item"&gt; 31-01-2020 &lt;/div&gt;
      &lt;div class="room-price-info-item"&gt;  6-03-2020 &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/a&gt;&lt;div class="card-room-prices-actions"&gt;&lt;a id="room_price_43" href="/room_prices/43/edit"&gt;
        &lt;!-- &lt;div class="card-room-prices-actions-item"&gt;
          &lt;p&gt;&lt;i class="fas fa-edit"&gt;&lt;/i&gt; Price details &lt;/p&gt;
        &lt;/div&gt; --&gt;
  
        &lt;/a&gt;&lt;a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/43"&gt;
        &lt;div class="card-room-prices-actions-item"&gt;
          &lt;p&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt; delete&lt;/p&gt;
        &lt;/div&gt;
  &lt;/a&gt;    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;a id="room_price_41" href="/room_prices/41/edit" class="ui-sortable-handle"&gt;
    &lt;/a&gt;&lt;div class="card-room-prices ui-sortable-handle" style=""&gt;&lt;a id="room_price_42" href="/room_prices/42/edit"&gt;
  
      &lt;div class="room-price-info"&gt;
      &lt;div class="room-price-info-item"&gt;fdsfsdfdsf&lt;/div&gt;
      &lt;div class="room-price-info-item"&gt;€5.00&lt;/div&gt;
      &lt;div class="room-price-info-item"&gt; 15-12-2019 &lt;/div&gt;
      &lt;div class="room-price-info-item"&gt; 31-12-2019 &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/a&gt;&lt;div class="card-room-prices-actions"&gt;&lt;a id="room_price_42" href="/room_prices/42/edit"&gt;
        &lt;!-- &lt;div class="card-room-prices-actions-item"&gt;
          &lt;p&gt;&lt;i class="fas fa-edit"&gt;&lt;/i&gt; Price details &lt;/p&gt;
        &lt;/div&gt; --&gt;
  
        &lt;/a&gt;&lt;a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/42"&gt;
        &lt;div class="card-room-prices-actions-item"&gt;
          &lt;p&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt; delete&lt;/p&gt;
        &lt;/div&gt;
  &lt;/a&gt;    &lt;/div&gt;
  &lt;/div&gt;&lt;div class="card-room-prices ui-sortable-handle"&gt;&lt;a id="room_price_41" href="/room_prices/41/edit"&gt;
  
      &lt;div class="room-price-info"&gt;
      &lt;div class="room-price-info-item"&gt;Rob II&lt;/div&gt;
      &lt;div class="room-price-info-item"&gt;€5.00&lt;/div&gt;
      &lt;div class="room-price-info-item"&gt; 15-12-2019 &lt;/div&gt;
      &lt;div class="room-price-info-item"&gt; 31-12-2019 &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/a&gt;&lt;div class="card-room-prices-actions"&gt;&lt;a id="room_price_41" href="/room_prices/41/edit"&gt;
        &lt;!-- &lt;div class="card-room-prices-actions-item"&gt;
          &lt;p&gt;&lt;i class="fas fa-edit"&gt;&lt;/i&gt; Price details &lt;/p&gt;
        &lt;/div&gt; --&gt;
  
        &lt;/a&gt;&lt;a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/41"&gt;
        &lt;div class="card-room-prices-actions-item"&gt;
          &lt;p&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt; delete&lt;/p&gt;
        &lt;/div&gt;
  &lt;/a&gt;    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;a id="room_price_42" href="/room_prices/42/edit" class="ui-sortable-handle"&gt;
    &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>console.log($(this).sortable('serialize'));</p>
  
  <pre><code>room_price[]=43&amp;room_price[]=41&amp;room_price[]=42
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>def sort
    params[:room_price].each_with_index do |id, index|
      binding.pry
      # id =&gt; "43"
      # index =&gt; "0"
      # RoomPrice.where(id: id) =&gt; [#&lt;RoomPrice:797987897 .....rank:1&gt;] 
      RoomPrice.where(id: id).update_all(rank: index + 1)
      binding.pry
      # id =&gt; "43"
      # index =&gt; "0"
      # RoomPrice.where(id: id) =&gt; [#&lt;RoomPrice:797987897 .....rank:1&gt;]
    end
  
    skip_authorization
    head :ok
  end
  </code></pre>