Update: Since this article was written, the jquery-ujs project has been turned into a gem which includes a generator that streamlines this process. Instructions can be found in the README for the Github project.

One of the most talked about features in Rails 3 is its plug & play architecture with various frameworks like Datamapper in place of ActiveRecord for the ORM or jQuery for javascript. However, I've yet to see much info on how to actually do this with the javascript framework.

Fortunately, it looks like a lot of the hard work has already been done. Rails now emits HTML that is compatible with the unobtrusive approach to javascript. Meaning, instead of seeing a delete link like this:

you'll now see it written as

This makes it very easy for a javascript driver to come along, pick out and identify the relevant pieces, and attach the appropriate handlers.

So, enough blabbing. How do you get jQuery working with Rails 3? I'll try to make this short and sweet.

Ubiquity 0.5 was released a few weeks ago, and I finally got around to updating my commands. If you were using my W3C or Drupal API Ubiquity commands, they are now 0.5 compatible. Please update your command source.

In this last episode of getting started with Exhibit and Drupal, we'll embellish the Exhibit we created in part 2 by adding some additional views, exploring the use of lenses and expressions, and adding another facet. Our final Exhibit can be seen here.

Adding Views to your Exhibit

So the first thing we'll do is add several additional views to our Exhibit. The tabular view is nice and provides some great functionality, but Exhibit provides some additional views that are great at visually enhancing the way your data is displayed. We'll start by adding a calendar view. To do this you'll need the following code pasted within your viewPanel:

<div ex:role="view"
      ex:viewClass="Calendar"
      ex:label="Calendar"
      ex:start=".field_date_value"
      ex:end=".field_date_value2"
      ex:eventLabel=".title"
      ex:formats="date { mode: short; 
                         show: date-time; 
                         template: 'MM/dd/yyyy' } 
                  item { title: expression(.title) }"></div>

Ok, now that we know a bit about Exhibit and how Drupal can help us create Exhibits, let's start by getting our Drupal data in Exhibit JSON format.

Setup

The setup I'm using for this tutorial includes a Drupal 6 installation with the following modules enabled: Exhibit, Views 2, CCK, Date, Location, and GMap. I'm only using CCK, Date, Location and GMap to create a custom Event node type with date and location fields. I've also added taxonomies to the Event node type for event type and tags. You can create your own node type and add whatever fields you would like. I'm using this setup to demonstrate the broadest possible uses of Exhibit. With this Event node type, we'll be able to create an Exhibit complete with Calendar, Timeline, Map, and Interactive Table displays. You can visit my playground here: http://d6demo.joshhuckabee.com

Create Exhibit JSON from your Views

In this multi-part tutorial I will show you how to create interactive Exhibit displays of you Drupal data using the Views, CCK, and Exhibit modules. I'll start with a brief overview of Exhibit and how it works, then move on to explain how to get your Drupal data in a format that Exhibit can use, and finally, I'll show you how to setup the Exhibit. If you're already familiar with how Exhibit works, you'll probably want to wait for part two of this series.

What is Exhibit?

Mozilla labs has released a slick new Firefox extension called Ubiquity that aims to streamline the most common tasks you do in your browser as well as make things that seemed otherwise overly difficult or complicated, much more easier. I've seen it being called everything from "Quicksilver for Firefox" to "mashups for dummies". There's plenty of buzz around the net to fill you in on the details, so I won't go into that here.

I certainly like what I see in Ubiquity. It goes way beyond what Quiksilver does (or can do) and its more thant just a "mashup". Its capabilities are virtually limitless. But, what I've liked most so far about Ubiquity is how easy it is to extend. In a matter of about an hour I saw the headline on reddit about "the future of the web browser", watched Aza's cool video, wrote two simple, trivial commands, published my commands, and watched as over a dozen different people (whom I don't know nor didn't pay) downloaded and began using those commands. That says a lot about the tool and the creators over at Mozilla labs.

Its definitely something to check out if you haven't done so already.

Oh, and about those commands. The first allows you to submit any page you're on to the W3C's markup validator. Just ubiq "validate" and hit enter. You can catch that one here.

The last command I wrote is basically a shortcut to Drupal's API. Ubiq "drupal" followed by a core function, file name, constant, global or topic, hit enter and you'll land softly on the correct Drupal API page.

One last thing, if you haven't heard about the IE Death March, go show your support.

In a previous post I showed how to get around a bug in Prototype that was ignoring the "on" parameter of the observe_field function. The solution I originally posted no longer works with the latest version of Rails and Prototype. Although the documentation for observe_field received a facelift, somehow the Rails team still missed the fact that the :on function doesn't work with the current version of Prototype. Or maybe its the Prototype guys we should be after here. :-)

The new fix requires a change to both prototype.js and a small Rails core update.

I will start with the update to prototype.js. Search for Abstract.EventObserver (around line 3632 in my version). That should now read

Abstract.EventObserver = Class.create({
  initialize: function(element, callback, trigger) {
    this.element  = $(element);
    this.callback = callback;
    this.trigger = trigger;

    this.lastValue = this.getValue();
    if (this.element.tagName.toLowerCase() == 'form')
      this.registerFormCallbacks();
    else
      this.registerCallback(this.element, this.trigger);
  },

  onElementEvent: function() {
    var value = this.getValue();
    if (this.lastValue != value) {
      this.callback(this.element, value);
      this.lastValue = value;
    }
  },

  registerFormCallbacks: function() {