Home arrow Ruby-on-Rails arrow Drag and Drop with script.aculo.us and Rails

Drag and Drop with script.aculo.us and Rails

In this second part to a three-part series that explains how to use script.aculo.us on Rails, you'll learn how to use a Rails helper and drag and drop. This article is excerpted from chapter four of Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Copyright © 2007 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 / 12
November 15, 2007
  1. · Drag and Drop with script.aculo.us and Rails
  2. · Drag and Drop
  3. · Draggable options
  4. · Droppables

print this article

Drag and Drop with script.aculo.us and Rails
(Page 1 of 4 )

Visual Effect Helper

So far, we’ve been using script.aculo.us’s Effect object directly, without the aid of Rails helpers. Rails also provides a helper to generate visual effects, allowing you to create effects without writing JavaScript. The helper isvisual_effect, and it’s used like this:

  visual_effect(:fade, :target)

The first argument is the name of a script.aculo.us effect (almost—see the note below), and the second is the ID of a DOM element. Thevisual_effecthelper outputs a JavaScript snippet, so it’s usually used in combination with another helper, likelink_to_function:

<li><%= link_to_function "Fade", visual_effect(:fade, :target) %></li>

The toggle effects can be used from the helper method as well:

  <%= link_to_function "Toggle Blind",
      visual_effect(:toggle_blind, :target) %>

Standard Ruby style is to use underscores to separate words in variable and method names. The script.aculo.us effect methods, on the other hand, follow the JavaScript convention of “CamelCase.” So when you are using thevisual_effecthelper, remember to use the lower-case, underscored versions of the effect names; e.g.,BlindUp becomesblind_up.

Thevisual_effecthelper is especially useful when combined with Ajax helpers, such aslink_to_remote. For example, you might use theHighlighteffect to draw the user’s attention to a portion of the page that has been updated via Ajax. To see it in action, first add a new action to chapter4_controller.rb:

  def get_time
render :text => Time.now

And then create an Ajax link to it in views/chapter4/ index.rhtml:

  <%= link_to_remote "Get Time",
:update   => "current_time",
:url      => { :controller => "chapter3", :action => "get_time" },
:complete => visual_effect(:highlight, :current_time) %>
<div id="current_time"></div>

Notice that, unlike the examples in the last chapter, we aren’t writing custom JavaScript in the:completeoption—instead, we let thevisual_effecthelper write it for us.

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