Cookies setting
0

Sorting with rails and jquery

There are a few tutorials on the subject already, but I want to show a very basic example that works and is completely unobtrusive. I’ve already mentioned in my previous blog post about Ryan Bates' screencast that shows you how to do sorting with prototype. There are also these two useful tutorials on the subject I found link1 link2. Mine is much more basic than those two, with some useful tricks.
Let’s start with what we need for this to work:
jQuery and jquery-ui included at the bottom of your layout like this = javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js", 'sort'

The last one is sort.js in which will hold the JS code (more on this later).

 

Gems: acts_as_list (more details in the gems github wiki and the Railscast mentioned above) and haml (the last one is optional, you can translate the code to .erb if you want)


I have many galleries that have many images (the same example as in the previous blog post). I want to sort the images in the gallery. The idea is to create a specific sorting page with a list of all images in a column with their titles and small thumbnails.


The view:
I’ve created a special page called sort.html.haml in which I display all the images in a column.
    %ul{:id => "gallery", :style =>"cursor: move" }
      - @images.each do |imagesort|
        %li{:id => "image_#{imagesort.id}"}
            %span#imagetumb
              =image_tag(imagesort.photo.url(:smalltumb))
            %span#title
              %strong
                =h imagesort.title
              =h imagesort.position
            %span#handle
It is very important that every image div id has the images id attached to it and a span handle. Also I use paperclip to upload photos that’s why the image_tag looks that way and I display the position number to check if the sorting worked after refreshing the page.


The Javascript:
This goes in the already mentioned sort.js
$(document).ready(function(){
    $("#gallery").sortable({
        axis: 'y',
        dropOnEmpty:false,
        cursor: 'crosshair',
        items: 'li',
        opacity: 0.5,
        scroll: true,
        update: function(){
            $.ajax({
                type: 'post',
                data: $('#gallery').sortable('serialize'),
                dataType: 'script',
                url: 'sorting'})
            }
    });
});

This is a very basic setup, go to the jquery-ui sortable documentation for more options.


The controller:
Here I use two actions: sort and sorting. The first just finds all the images in the gallery, the second updates the image positions in the database.
  def sort
    @images = @gallery.images.find(:all, :order=> 'position DESC')
  end
  def sorting
    @images = @gallery.images
    @images.each do |image|
      image.position = params["image"].reverse.index(image.id.to_s)+1
      image.save
    end
    render :nothing => true
  end
If you want to display the images ASC, then you need to remove .reverse from the sorting action.


That’s about it, if you want to add or ask anything, leave a comment below.
 

24 Jun 2010 at 20:41
RoR




(required)

(required)