#147 Sortable Lists (revised)

how it works with pagination?

Rather than using acts_as_list could we just give the position a default value? (i.e. 10000)

Revised Railscasts are one of the best things ever. A nice idea taken from the Mythbusters ;]

Thanks for another great episode!

EDIT: It should also be under the Rails 3.1 tag since you were using coffeescript.

Thank you Ryan,

Can we add to trash box to delete faq links :) with drag? Means Drag and Delete.

May be later, you will add this feature for your casts.

Regards

Ryan you forgot to add the modified routes file to the show notes. Thanks for these!

Thanks Ryan! How would you use this with pagination?

I noticed this one before.. just want to point out that you shoud use $ as argument, not global variable

jQuery ($) ->
  ...

I am a little late to the party, but I would recommend looking at ranked model, it handles ordering a lot nicer than the (old) acts_as_list.

Here's a snippet from the Github project page:

This libarary is written using ARel from the ground-up. This leaves the code much cleaner than many implementations. ranked-model is also optimized to write to the database as little as possible: ranks are stored as a number between -8388607 and 8388607 (the MEDIUMINT range in MySQL). When an item is given a new position, it assigns itself a rank number between two neighbors. This allows several movements of items before no digits are available between two neighbors. When this occurs, ranked-model will try to shift other records out of the way. If items can't be easily shifted anymore, it will rebalance the distribution of rank numbers across all memebers of the ranked group.

I love that you snuck in "When will TextMate 2 be released?"

Very helpful screencast!

I think "render nothing: true" is a typo?

Hi guys!

I'm having a little problem trying to understand 'content_tag_for', could you please give me a hint?

I'm not pretty sure how to get/use the IDs from inside a partial :( here is my code:

<ul id="net1" class="connectedSortable">
  <%= f.simple_fields_for :net_devices do |netdev| %>
  <%= render 'net_device_fields', :f => netdev %>
  <% end %>
</ul>

<%= content_tag_for :li, >>here?<< do %>
  <span class="handle"><%= image_tag("icons/grippy.png", :alt => "Drag and Drop! :)") %></span>
  <%= f.text_field :dev_name, :placeholder => "name", :size => 7, :maxlength => 7 %>
  <%= f.text_field :mac_address, :placeholder => "mac address", :size => 16, :maxlength => 16 %>
  <%= link_to_remove_fields "remove", f %>
<% end %>

Thanks in advance! :D

Hi, folks!

I'm having some issues here. I have Rails 3.1 and followed all the initial steps correctly.

The problem is that my "ul" list does not become "sortable". It does not work.

Here is my code:

jQuery ->
  $('#sortable').sortable()

# This partial is called by new and edit views from drafts_controller.rb

<ul id='sortable'>
<% @draft.clauses.each do |clause| %>
  <%= content_tag_for :li, clause do %>
    <%= link_to h(clause.name), clause_path(clause) %>
  <% end %>


<% end %>
</ul>

Thanks in advance!

What other considerations should be taken into account to use the PUT method, instead of POST? Is it as simple as changing the method name?

jQuery ->
  $('#download_types').sortable
    axis: 'y'
    handle: '.handle'
    update: ->
      $.put($(this).data('update-url'), $(this).sortable('serialize'))

resources :download_types do
  collection do
    put 'sort'
  end
end

What if I want to use two models in the nested set view? An example would be a dynamic restaurant menu where I have menu_sections and menu_items and i want to drag menu items to sections? How do I tackle this?

Would have loved to see this working across different lists (moving items from one to the other). I already have something working for this, although I don't think it is very efficient.

I seem to be getting a "sort_faqs_url" not found error when trying to access my controller sort action. Everything matches the above code perfectly

Does this work with mongoid?

Im using Ruby 1.8.7 and Rails 3.1 and i was getting this error WARNING: Can't verify CSRF token authenticity when released the drag.

So i google it and I had to do a modification of Coffee Script:

update: ->
                        $.ajax({
                                type: 'post'
                                data: $('#banners').sortable('serialize')
                                dataType: 'script'
                                headers: 'X-CSRF-Token': '<%= form_authenticity_token.to_s %>'
                                complete: (request) -> 
                                        $('#banners').effect('highlight')
                                url: $(this).data("update-url")
                                })

I hope to help someone else who has this problem!

Anyone know how efficient updating the sort order like this is? In the case of my application, users have hundreds of items in a list. If I have thousands of users are all changing the sort order like this on lists of hundreds or possibly thousands of items, it seems the efficiency would be bad.

What are some other thoughts on this?

Is the following change justifiable?

from:

def sort
  params[:faq].each_with_index do |id, index|
    Faq.update_all({position: index+1}, {id: id})
  end
  render nothing: true
end

to:

def sort
  Faq.transaction do
    Faq.connection.execute("SET SESSION TRANSACTION ISOLATION LEVEL SERIALIZABLE")
    params[:faq].each_with_index do |id, index|
      Faq.update_all({position: index+1}, {id: id})
    end
  end
  render nothing: true
end

Ref: http://rhnh.net/2010/06/30/acts-as-list-will-break-in-production

"We use update_all here so that all of the updates are made in a single query"

hi Ryan, for me it still issues individual updates for each item in the list. that makes sense since the "update_all" call is inside of the each loop. am i missing something?

p.s. great work on the screencasts, keep 'em coming.

What would be the best way to store the position with double digits ; set 01 instead of 1, 02 instead of 2 and so on until 10.

Thanks for another great one Ryan!

Ryan, Thanks a million (yet again) I've used this method in a few apps it really adds a useful and dynamic feature.

I'm using it in one case to allow users to sort names. It's working fine but I'd like to add a bit more to it in that I'd like to style the Number 1 name differently. This is easy for me to do on page refresh but it'd be smashing if the Name in question got styled dynamically as it was dragged to the top of the list by the user i.e. without the user pressing F5 or CMD+R, depending on your religon!

Screencast is awesome.

I'm running into an issue: the sortable order gets messed up if the users page does not match the database. This can happen if they are using an outdated view (didn't refresh page) or another user changed the order before they refreshed the page. Any idea how to resolve this? Perform a check somehow to see if the data matches the db before the sort, else redirect.?

I'm having trouble with a slightly more advanced version of this where I'm trying to use connected sortable lists and sort things between lists. I have a few models (Page, Row, Column, Block) and want to let users drag blocks between columns. The tricky part that I can't figure out is the best way to delete a column/row if it no longer has blocks after sorting. Can anyone help? I posted the question in more detail on stackoverflow here http://stackoverflow.com/questions/10500994/rails-sort-connected-lists-and-delete-empty-parent

Hey, thanks for the video. How would this work if the set of items is based on a has_many through model?

for example,

I have a list of pieces like this: @queue.pieces

pieces and queues are related via a has_many through piece_queues

would that work?

Anyone done anything with this & update_all where the items being sorted have a user_id parent. As it is, a Post with a random set of Faq's could resort regardless of who the parent user_id is.

One thing I would do different is move the sorting into a new controller class and put the sorting in its #create action. This way we can stay within the boundaries of the seven actions.

class SortsFaqsController < ApplicationController                               
  def create                                                                    
    # same as FaqsController#sort shown in screencast                                                        
  end                                                                           
end

resource :sorts_faqs, only: :create                                             

<ul id="faqs" data-update-url="<%= sorts_faqs_path %>">
<% @faqs.each do |faq| %>
  <!-- same as shown in screencast -->
<% end %>
</ul>

Is there a way to do this when you have nested forms (associations)? As in, we have a @license object, and every @license has @progress_point. Well, the form for licenses looks like this:

= form_for @license, :url => path do |f|
  .field
    = f.label :name
    = f.text_field :name
  .field
    = f.label :active
    = f.check_box :active
  .field
    = f.label :data
    = f.text_area :data

  %table{:cellpadding => "10"}
    =f.fields_for :progress_points do |builder|
      = render "progress_point_fields", :f => builder


  = link_to_add_fields "Add Sequence", f, :progress_points

The partial "progress_point_fields" has:

%tr.dynamic_field
  %td
    .field
      = f.label :assessment_id
      = f.text_field :assessment_id
  %td
    .field
      = f.label :milestone_id
      = f.text_field :milestone_id
  %td
    .field
      = f.label :sequence
      = f.text_field :sequence

The problem is that :progress_points isn't an @object so I can't exactly get the ID (or at least I'm not aware of any way of getting it).

Any ideas? Thanks in advance

Anyone know how I might update the position number in the view when the user drops the element? Right now, everything is working but the numbers I have showing do not update to show their new position. It's probably basic ajax stuff, any ideas?

Just a heads up:

After installing gem, and adding 'acts_as_list' to your model you might get this error...

undefined method `key?' for nil:NilClass

..if you don't restart the server.

Anyone have an example of how would you write a spec or test something like this?

Routing Error, help :)

No route matches {:action=>"sort", :controller=>"objectives", :profile_name=>"Codemaster"}

  scope ":profile_name" do
    resources :tasks do
      resources :objectives do
        collection { post :sort }
      end
    end
  end

sort_task_objectives POST   /:profile_name/tasks/:task_id/objectives/sort(.:format)       objectives#sort

I did everything else as stated in the video.
data-update-url="<%= sort_task_objectives_url %>"

I do have

  before_filter :authenticate_user!
  before_filter :find_user
  before_filter :find_task
  before_filter :ensure_proper_user

As you are using nested resources you need to pass the task.

data-update-url="<%= sort_task_objectives_url(@task) %>"

I'm running into a strange issue: when my initial page loads, the list is NOT sortable. If I refresh, it becomes sortable and everything works.

I'm using ZURB Foundation in my app. Could there be some sort of conflict?

I'm also pretty fuzzy on javascript, jQuery and the function() call.

Could it be that the list is shown before the document finishes loading? Isn't this solved by the function() call? Why doesn't Ryan have that function() call in his coffee script?

Thanks!

Rails 4

DEPRECATION WARNING: Relation#update_all with conditions is deprecated. Please use Item.where(color: 'red').update_all(...) rather than Item.update_all(..., color: 'red').

I used Daren Serra Dias Warburton's solution to get this working in Rails 4.

Rails 4

def sort
  params[:stack].each_with_index do |id, index|
     Stack.where(id: id).update_all({position: index+1})
  end
  render nothing: true
 end

undefined method `sortable_element'

I'm getting this error in Rails-4.
This method is deprecated in rails-4 then how did you worked with it ?

I'm using rails 4 & i'm getting this error

"Couldn't find HomeworkType without an ID"
showing as 404 error while dragging & dropping.

Please help me guys

I'm trying to implement sortable rows in my Rails 4 application. For some reason dragging a row doesn't save the position in the database. I'm not sure whether the sort action method gets called.
When I check the Javascript console with Google developer tools no Javascript errors are thrown, so I'm not sure what's the problem.

My code is at:
https://github.com/acandael/beautysalonapp2/tree/drag-and-drop

anyone else got issues implement this drag and drop functionality for a Rails 4 application?

thanks for your help,
Anthony

In your ascii cast I believe there is a typo

jQuery ->;
$('#faqs').sortable();

should be

jQuery ->
$('#faqs').sortable();

There is an extra semicolon that was breaking my code.

Read how to get Sortable Lists to work with Rails 5

The content_tag_for was available in Rails 3 and 4. It has been removed from Rails 5.

To bypass content_tag_for try this simple format - it works for me with Ruby 5:

<li class="category" id="category_<%= sort_category.id %>"><span class="handle"><%= sort_category.title %></span></li>