Home/ Questions/Q 4616414
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:58:41+00:00

I’m building a drag-and-drop list via jQuery UI where users can drag a list

  • 0

I’m building a drag-and-drop list via jQuery UI where users can drag a list of items (categories), and as soon as an item is dragged, the whole thing is serialized and passed to the ‘sort’ function in the controller as the parameters/params[:category] to index through each item and update it’s position. For sake of simplifying this as much as possible to try and hunt the following bug out, I am actually manually setting the string in the javascript for now. (My javascript, view and controller code is at the end of this post below).

Here’s the problem. With anything up to five items, it works beautifully. Console outputs…

Started POST "/categories/sort" for 127.0.0.1 at Wed May 11 12:03:04 -0500 2011
  Processing by CategoriesController#sort as 
  Parameters: {"category"=>{"1"=>{"id"=>"1"}, "2"=>{"id"=>"2"}, "3"=>{"id"=>"3"}, "4"=>{"id"=>"4"}, "5"=>{"id"=>"5"}}}
  Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 1 LIMIT 1
  AREL (0.5ms)  UPDATE "categories" SET "position" = 1, "updated_at" = '2011-05-11 17:03:04.412058' WHERE "categories"."id" = 1
  Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 2 LIMIT 1
  AREL (0.4ms)  UPDATE "categories" SET "position" = 2, "updated_at" = '2011-05-11 17:03:04.416833' WHERE "categories"."id" = 2
[...]

However for some absolutely crazy reason, add in a sixth item/category to that string, and suddenly the results become this…

Started POST "/categories/sort" for 127.0.0.1 at Wed May 11 12:12:35 -0500 2011
  Processing by CategoriesController#sort as 
  Parameters: {"category"=>{"6"=>{"id"=>"6"}, "1"=>{"id"=>"1"}, "2"=>{"id"=>"2"}, "3"=>{"id"=>"3"}, "4"=>{"id"=>"4"}, "5"=>{"id"=>"5"}}}
  Category Load (0.2ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 6 LIMIT 1
  AREL (0.4ms)  UPDATE "categories" SET "position" = 1, "updated_at" = '2011-05-11 17:12:35.358963' WHERE "categories"."id" = 6
  Category Load (0.2ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 1 LIMIT 1
  AREL (0.2ms)  UPDATE "categories" SET "position" = 2, "updated_at" = '2011-05-11 17:12:35.362330' WHERE "categories"."id" = 1
  Category Load (0.1ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 2 LIMIT 1
[...]

As you can see, when adding category number six, the params for that category runs out and becomes the first item in the list to loop through the index with, completely throwing off the correct order. Whats far more crazy is that if I leave the ‘category[6][id]=6’ portion in the parameters string and eliminate a few before it, number six will always be the first no matter what.

This makes absolutely no sense, and the only thing I can figure is that I’m not formatting the parameters string in the javascript correctly. What am I doing wrong?

index.html.erb

<ul id="categories">
   <li id="category_1"><div class="handle"></div>One</li>
   <li id="category_2"><div class="handle"></div>Two</li>
   <li id="category_3"><div class="handle"></div>Three</li>
   <li id="category_3"><div class="handle"></div>Four</li>
   <li id="category_3"><div class="handle"></div>Five</li>
   <li id="category_3"><div class="handle"></div>Six</li>
</ul>

application.js

$("#categories").sortable({
   opacity: 0.6,
   handle: '.handle',
   update: function(event, ui) {
       var parameters = 'category[1][id]=1&category[2][id]=2&category[3][id]=3&category[4][id]=4&category[5][id]=5&category[6][id]=6';
       $.post("/categories/sort", parameters);
   }
});

categories_controller.rb

def sort
  params[:category].each_with_index do |id, index|
    category_id = id[1][:id]
    Category.update(category_id, :position => index + 1)
  end
  render :nothing => true
end
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was able to finally shed some light on why this was happening via this thread: My hashes are stacking unordered..What's a loop that can select them by their Hash ID?

    I am running REE 1.8.7, therefor my param is not being sorted. I was able to solve the issue with replacing the each_with_index line in my sort controller function with this…

    params[:category].sort { |a, b| a <=> b }.each_with_index do |id, index|

    The params are resorted inside the function and now update the database in the correct order.

    • 0