Home arrow Ruby-on-Rails arrow Ruby on Rails with Ajax: Modifying the Slide Show

Ruby on Rails with Ajax: Modifying the Slide Show

In this conclusion to a two-part article, you'll learn how to drag and drop slides in our example slideshow to modify it, and how to filter by category. This article is excerpted from chapter six of the book Ruby on Rails: Up and Running, written by Bruce A. Tate and Curt Hibbs (O'Reilly, 2006; ISBN: 0596101325). Copyright 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
August 02, 2007
  1. · Ruby on Rails with Ajax: Modifying the Slide Show
  2. · Drag and Drop Everything (Almost Everything) continued
  3. · Adding a Dropped Photo
  4. · Filtering by Category

print this article

Ruby on Rails with Ajax: Modifying the Slide Show
(Page 1 of 4 )

Drag and Drop Everything (Almost Everything) 

We have already displayed a list of thumbnails of all photos that are in the slideshow and enabled the user to drag them around to rearrange their order in the slideshow. Now let's add a second list of thumbnails, showing all photos that are not being used in the slideshow.

We'll let the user add a photo to the slideshow by dragging it from the list of unused photos and dropping it onto the slideshow thumbnails. Similarly, we can enable the user to remove photos from the slideshow by dragging its thumbnail from the slideshow and dropping on the unused photos list. Finally, we'll allow the user to filter the unused photos list by category.

As you might expect, we can accomplish all that in a very small amount of code. We will add a mere 58 lines of Ruby code to the models and controllers, 47 lines to the view templates, and 16 lines to our CSS stylesheet! Figure 6-4 gives you a preview of how this is going to look when we're done.

Figure 6-4.  Preview of drag-and-drop slideshow editing

Let's start by updating the slideshow's edit template. Edit photos/app/views/slideshows/edit.rhtml to look like this:

  <h1>Editing slideshow</h1>

  <div id='slideshow-contents'>
    <p style='text-align: center;'><b>Slideshow Photos</b></p>
<div id='slideshow-thumbs'>
<%= render :partial => 'show_slides_draggable' %>

  <div id='slideshow-photo-picker'>
    <p style='text-align: center;'><b>Unused Photos</b></p>
<div id='slideshow-photos'>
      <%= render :partial => 'photo_picker' %>

  <div id='slideshow-attributes'>
    <p><%= link_to 'Play this Slideshow', :action => 'show', :id => @slideshow %></p>
<div style='border: thin solid; padding-left: 1em;'>
<p style='text-align: center;'><b>Attributes</b></p>
<%= start_form_tag :action => 'update', :id => @slideshow %>
        <%= render :partial => 'form' %>
<%= submit_tag 'Save Attributes' %>
      <%= end_form_tag %>
      <b>Hint:</b> Drag and drop photos between the
      two lists to add and remove photos from the
      slideshow. Drag photos within the slideshow to
      rearrange their order.

  <%= drop_receiving_element("slideshow-contents",
            :update => "slideshow-thumbs",
            :url => {:action => "add_photo" },
            :accept => "photos",
            :droponempty => "true",
            :loading => visual_effect(:fade),
            :complete => visual_effect(:highlight, 'sortable_thumbs')
            ) %>

This file has been almost entirely rewritten, so there are no marked-as-changed lines. You can see that I have laid out this edit page into three sections:

  <div id='slideshow-contents'> . . . </div>
  <div id='slideshow-photo-picker'> . . . </div>
  <div id='slideshow-attributes'> . . . </div>

Only the slideshow-photo-picker is new. It shows the list of unused photos that can be added to the slideshow. We will set up the CSS stylesheet to display these sections side-by-side as you saw them in Figure 6-4.

slideshow-contents is rendered by the partial template show_slides_draggable,
slideshow-photo-picker is rendered by the partial template photo_picker, and slideshow-attributes is mostly rendered by the form partial template that was generated from the scaffolding. I say "mostly" because I added a few things inline around the rendering of form.

blog comments powered by Disqus

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials