With Prototype, you can use the javascript that comes with the Rails distribution, but for this case I decided to go with the Table Drag and Drop JQuery plugin, as it had the right combination of functionality and ease of use. Once the plugin is in your project, getting a sortable table is very simple.

First up is the view, with the javascript injected into the head section of the document by using content_for. You’ll note that for this simplified example an unordered list actually would have been better than a table, but in the original app I wanted to use a table for this list of items, so I wanted to make sure to use a plugin that supported that.

After creating the table, we simply use the document ready event to add some behavior to it. The plugin serializes the ids of the table rows in an array and sends that array, named after the table id, as a parameter to the controller. I add the authenticity token to the parameters sent via AJAX, and if the action was successful I just pop up an alert.

The controller iterates over all the specifications, checking the position in the db (see the acts_as_list plugin) versus the position in the array that was sent in the request. For the items that are affected, it updates the position in the db. Since we are only calling this action via AJAX, we just render nothing and indicate a successful status.

Of course there are few bits you can pretty up, both in the view and the controller, but that’s the basic approach. Fast, easy, and client-approved. :)

I am sponsoring MerbCamp, but unfortunately I can’t make it there myself, and by being a sponsor I get two passes to attend MerbCamp that I won’t be able to use. So, instead of wasting them, I thought I’d offer them to anyone who wants them. So, if you want a free pass to MerbCamp, here’s what you need to do:

Enter your name and email address via this Google doc by 12:01 AM Pacific Time on Thursday, the 25th of September. On Thursday morning, I will randomly select two people who submitted their info and let them know via email how to get the passes. That’s all you have to do.

While you’re dropping your name in the hat (as it were), do feel free to also drop a suggestion in the box if you have an idea for a Rails application that would make a great Rails Kit.

It’s a pleasure to be able to sponsor MerbCamp. If you have a Ruby- or Rails-related event you’re coordinating that could use a sponsor, feel free to drop me a line.

My current lease will be ending soon, so I figured it was a good time to do some comparison shopping. So I turned to Craigslist to find out if there were any sweet sublease deals available. The problem was that it’s a bit of a pain to use the Craigslist interface when your primary concern is proximity, as you have to click through to each post and then look at the address or click on the map link. So, I wrote a script to do that for me, and used the Map Rails Kit to plot the locations. And thus, OfficeMapper was born.

OfficeMapper shows you a map, with all the available office postings from Craigslist (that have an address listed) plotted on the map, making it easy for you to find what’s available near you. Some Craigslist posting don’t have addresses, so I can’t show you those, but I find the site quite handy for those that do. Once you click on a map location, you’ll get summary info about the listing, and a link back to Craigslist for more information. It’s fun, useful, and a good example of how easy it is to create a map visualization in Rails. All I had to do was find addresses, like ‘411 Market St Kirkland WA’, and create markers with those addresses. The Map Kit took care of the rest.

I like easy. :)

Here’s the scenario. Imagine you are creating an admin UI for a CD store, and when editing a CD you want to allow the admin the edit the tracks that belong to the CD. Additionally, you want to be able to click a button to add a new row via a javascript, so the admin can add multiple tracks with just one submit. A snippet of your view on the CD edit page might look something like this:

This is fairly standard stuff. You have a list of songs in a table rendered by a partial. The “Add a song” button calls the addRow function to insert some HTML in the table:

The partial has your typical text inputs rendered by the text_field helper. To make the song title auto-complete-able, though, we add the class “text_complete” to it, and add a div with the class “auto_complete” (which will hold the suggestions) right after it. And now, for the magic that allows you to auto-complete more than one text box at a time, when the text boxes are dynamically generated. Let’s revisit that javascript:

I’m using the Autocompleter.Local class here, as I like to pre-load the page with the suggestions to keep things snappy. The first line of that javascript block does this, wrapping the song and artist names in spans that I can style and select on later when populating the text boxes. After the HTML from the partial is inserted, a new Autocompleter.Local is create that populates the last text box with the “auto_complete” class—the one that just got inserted. Likewise, the just-inserted div is used for displaying the suggestions. The third argument is the array of song and artist names to use for the suggestion search. The select option in the fourth argument tells the completer which class to use to populate the primary text box (the song name), and the afterUpdateElement option uses an anonymous function to populate the artist name text box, which lives in the table cell next to the song name text box, if there is an artist name.

There are two caveats to this approach, though:

1. I had to change line 455 of controls.js to match on \W rather than \s to still match at the beginning of the song name (ignoring the HTML markup in the array of suggestions)


2. Since both the artist name and song name are in the search string, the auto-suggest could find artists matching what you typed in the song name input box. If I cared, I could solve this problem, but it’s not a big deal in my case.

Created by Jacques Crocker, this Rails Kit makes it so easy to quickly build a Rails application with a mapping component. I took this new Kit, wrote a script to fetch some addresses (which I’ll be blogging more about soon), and had a map with markers running within 10 minutes. You don’t have to worry about geocoding, the javascript APIs, and so on… You just create a Marker record in the database with an address, and the Kit will geocode it for you and place the marker on the map. It’s fun stuff.

So, if you want to add some sort of mapping to your Rails application, make sure you check out the Map Rails Kit—it will save you a ton of time.

P.S. Another cool thing about this Kit is that I didn’t create it. :) If, like Jacques, you have an idea for an application that would make a great Kit, feel free to drop me a line, and maybe you can be the next Rails Kits author!