Using NestedSortable with Ancestry gem and Mongoid

Question

trying to incorporate nested sortable into my rails app. I'm using Mongoid and the Ancestry gem, and I'm trying to make a page that updates the parent_id of a category on drag and drop with Nested-Sortable.

Been trying to experiment, but don't really understand what NestedSortable spits out in order to create a controller that will read it.

My controller has:

def sort
  Category.update_all({parent_id: params[:parent_id].to_i})
  render nothing: true
end

Routes:

resources :symbols, :as => :categories, :controller => :categories do
  collection {post :sort}
end

Reorder.js.coffee:

jQuery ->
  $('.reorder-tree').nestedSortable
    handle: '.handle'
    items: 'li'
    toleranceElement: '> div'
    update: ->
      $.post($(this).data('update-url'), $(this).nestedSortable('serialize'))

And my reorder view spits out something like:

<ol class=reorder-tree>
<li id="category_513d372b10188f9b6b000014"><div>
  <i class="icon-move handle"></i>
  <a href="/symbols/chickne">Chickne</a>
  <span class="btn-group show-on-hover">
    <a href="/symbols/new?parent_id=chickne" class="btn btn-micro" data-remote="true" title="Add Sub-Category"><i class="icon-plus"></i>
    </a>
    <a href="/symbols/chickne/edit" class="btn btn-micro"><i class="icon-pencil"></i>
    </a>
    <a href="/symbols/chickne" class="btn btn-micro" data-method="delete" data-remote="true" rel="nofollow" title="Delete Category"><i class="icon-remove"></i>
    </a>
  </span>
</div>
<ol class="visible"><li id="category_513d373310188f9b6b000016"><div>
  <i class="icon-move handle"></i>
  <a href="/symbols/smoking-babies">Smoking Babies</a>
  <span class="btn-group show-on-hover">
    <a href="/symbols/new?parent_id=smoking-babies" class="btn btn-micro" data-remote="true" title="Add Sub-Category"><i class="icon-plus"></i>
    </a>
    <a href="/symbols/smoking-babies/edit" class="btn btn-micro"><i class="icon-pencil"></i>
    </a>
    <a href="/symbols/smoking-babies" class="btn btn-micro" data-method="delete" data-remote="true" rel="nofollow" title="Delete Category"><i class="icon-remove"></i>
    </a>
  </span>
</div>
<ol class="hide"></ol>
</li>
</ol></li>
</ol>

Any help would be appreciated, thanks.

Answer 1

After seriously playing around with the array I was getting from Nested Sortable, I was able to make this work by using this in my controller:

  def sort
    # html = "Env: #{Rails.env}. "
    # infor = params[:category]
    params[:category].each do |id, attr|
      thisCat = params[:category][id]
      @category = Category.where(:_id => id).first
      # html << "ID= #{id} , thisCat= #{thisCat} Name= #{@category.name} Parent= #{@category.parent_id} ; "
      unless thisCat == "null"

        @category.parent_id = thisCat.to_s
        @category.save
      end
    end
    # flash[:alert] = html
    # flash[:error] = infor
    # render nothing: true
  end

You can see what I commented out after I got it to work; that's all my debugging flash statements.

Cheers!