Introduction to Ruby on Rails with Ajax

The update_slide_order method is pretty simple as well. Edit photos/app/controllers/ slideshows_controller.rb, and add this method:

  def update_slide_order
    params[:sortable_thumbs].each_with_index do |id, position|
      Slide.update(id, :position => position)
    end
  end

This method iterates through each slide in the list, extracting its ID and position in the list, and uses this information to update that slide's database row with its new position. Let's walk through this code in a little more detail:

1. params is a hash that holds all the parameters sent to the server in the HTTP request. params[:sortable_thumbs] retrieves the parameter for the sortable_thumbs list, which is an ordered array of the IDs of each thumbnail in the list.
   
2. each_with_index is a Ruby iterator that, just like the each iterator, walks through the array one item at a time. But on each iteration, each_with_index passes to the code block both the object held in the array (the slide id) and its index in the array (which is assigned to position).
   
3. Slide.update(id, :position => position) then calls the Slide model class to update the slide identified by id with its new position.

We're almost ready to give it a try, but first let's edit photos/public/stylesheets/slideshows.css and add some formatting instructions for the two div IDs we created. Add the following at the end of the file:

  #slideshow-contents {
     float: left;
     width: 11em;
     padding: 0.50em;
     text-align: center;
     border-right: thin solid #bbb;
     padding: 0.50em;
     padding-bottom: 10em;
  }

  #slideshow-attributes {
     margin-left: 23em;
     padding-left: 1.5em;
     padding-top: 1.5em;
  }

This causes the contents of the slideshow (which will be a list of thumbnail images) to be displayed down the left side of the page, and the slideshow's attributes will be displayed immediately to the right of the thumbnails.

Let's see how this looks. Browse to http://127.0.0.1:3000/slideshows/list, and click the edit link for our one and only slideshow. It will look like Figure 6-2.

Click on one of the photos, and try dragging it around. When you drop it into a new location, update_slide_order is called to write the new order to the database.

Lets fix one minor thing here before we move on. Wouldn't it be better to see the number of each photo appear vertically aligned in the middle of the thumbnail instead of at the bottom? Because the HTML for each thumbnail image is created by

Figure 6-2.  A drag-and-drop list of photos

our own helper function, thumbnail_tag, we just need to edit that function and add a vertical-align style attribute.

First, edit photos/app/helpers/slideshows_helper.rb, and add the code shown in bold:

  module SlideshowsHelper
    def thumbnail_tag(slide)
      image_tag("photos/#{slide.photo.thumbnail}",
              :style=>"vertical-align:middle") if slide
    end
  end

Now, refresh your browser: the list numbers are nicely centered, as you can see in Figure 6-3.

With a very small amount of code, we added a very nice drag-and-drop user interface for reordering the slides in a slideshow. But we're just getting started with our Ajax-enabled user interface.

Figure 6-3.  Nicely centered list numbers

Please check back next week for the conclusion to this article.