Event Wax Is The First Production UJS Application

09 NOV

UPDATE: It appears that Zaadz event section beat us to it as the first production UJS app. Damn! Excellent work though.

Last week we quietly snuck Event Wax into production but now, at last, we are ready to shout about it. It’s the result of several months work and a whole load of experience running @media and is something we’re pretty proud of. Event Wax is a web-based application that allows event organisers to easily provide registration, payment and management facilities for attendees. An early prototype of the application was used to manage the 800 delegates for @media 2006 to great success but since then we’ve been refining and improving it and its turned into a pretty nifty application. So now it’s out in the open I thought I’d speak a little bit about some of its technical aspects.

One of the biggest highlights for me is that it’s, to my knowledge, the first production application using the UJS Plugin. Much of the development of the plugin has grown up alongside this and some of Agile Evolved’s applications and it’s come a long way in a few months from a fairly simple plugin to something very capable of handling pretty intensive Ajax stuff. In this post I’ll take one of those features and talk about some of the thinking behind its implementation. That feature is…

The In-Line Help System

One of my favourite features in Event Wax is the help sidebar in the admin area. The interface itself is kept pretty clean but if you need help on a particular page you can just open the help which shows the relevant help page. This way we avoid filling the screen with prompts and help content that will get in the way of experienced users but still give new users plenty of help if they need it.

The help content is in fact taken from the help site which resides at eventwax.com/help but is re-purposed and pulled into the help sidebar via Ajax. This way we have a searchable, printable plain HTML version of the documentation for users to refer to if needed but are able to provide context sensitive help to users as they use the application. Of course, this is all implemented unobtrusively and still provides users with a decent experience if for some reason JavaScript isn’t behaving. Here’s how:

Firstly, we define the inline help link and a div to hold the help content:

<a href="/help/your_account/your_event/the_attendees_tab" id="hlink"><span>Help</span></a>

<!-- code omitted for clarity -->

<div id="help"></div>

Notice that the href of the link is pointing to the location of that particular help page in the regular site so as it stands now our help link will just send us through to the correct documentation. In order to pop up the content in a side bar I’ve implemented a help script that’s responsible for opening and closing the sidebar by applying a class to the help div and triggering an Ajax.Updater request to fill it with content. I’m not going to show that here but you can check it out if you like. Essentially this gives us Help.show(url), Help.hide() and Help.toggle(url) to play with.

Now we can use UJS to apply some behaviour and make our sidebar come alive:

<% apply_behaviour '#hlink:click', 'Help.toggle(this.href); return false;' %>

This catches the help links click event and instead triggers the sidebar to open and close. We call Help.toggle() to open the sidebar passing in the href of the link as the content to get to place in the help div. At this point, it’s all pretty much working but there’s one snag: there are links inside the help content and we want them to change the sidebar rather than link normally. Time for some more UJS:

<% apply_behaviour '#help a:click', 'Help.open(this.href); return false;' %>

We hijack the click events of all the links inside the help div and make them call Help.open() with their href instead of their default behaviour which causes them to open within the sidebar. Sorted.

There’s a final problem to solve. The normal help content is going to need to be inside a full HTML document with a header and footer while the help content in the sidebar doesn’t need any of that. We solve this with a bit of Rails magic. The Help controller that displays the help pages looks like this:

class HelpController < ApplicationController

  # displays a page of help given the path
  def page
    # page finding code ommitted for clarity
    respond_to do |type|
      type.html { render :file => page, :layout => :help }
      type.js { render :file => page, :layout => false }
    end
  end

end

This means that requests for help pages via Ajax get no layout and just get the html content and normal requests get the whole page, doctype, html tag and all. As you can see it would be easy to dispense these pages in lots of other formats if we need to.

So that’s that…As you can see, it’s really quite simple to get some impressive features working unobtrusively, especially with Rails and UJS. In coming posts I’ll highlight how I went about implementing some of the other features of Event Wax but in the meantime register and check out the application and plan an event while you’re at it. Get it while it’s free!