Dropping and Sorting with AJAX and script.aculo.us

As with droppables, the sortable_element helper also can take all the familiar Ajax options that link_to_remote provides. By default, when an Ajax call is created, the action called gets the serialized sortable elements as parameters. To work, the IDs of the sortable elements should follow the naming convention used bySortable.serialize: the unique part of the ID should be at the end, preceded by an underscore. Soitem_1,person_2, and_3would make good IDs, butitem1,2_personand3would not. For example:

  <ul id="listAjax">
    <li id="item_1">Buy milk</li>
    <li id="item_2">Take out trash</li>
    <li id="item_3">Make first million</li>
  </ul>

  <%= sortable_element :listAjax,
       :url      => { :action => 'repeat' },
       :complete => "alert(request.responseText);" %>

In the example, reordering the list triggers an Ajax call to therepeataction, which gets alistAjaxarray parameter containing the IDs of the sortable elements, in the current order. To see this in action, define arepeataction to echo back the parameters it receives, like this:

  def repeat
    render :text => params.inspect
  end

For a real-world example of creating sortables and handling reordering on the server side, see the Review Quiz example application in Example A.

Summary

This chapter introduced the major features of script.aculo.us—specifically, those features of the library that have corresponding Rails helpers. Those features fall into two main categories: visual effects and drag and drop. The library has even more to offer and is fully dissected in Chapter 11.

In the next chapter, we’ll explore the crown jewel of Ajax on Rails: Ruby-generated JavaScript (RJS).