Event Wax Is The First Production UJS Application

Event Wax 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

Screenshot showing the open help sidebar 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 }


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!

6 Comments (Closed)

Looks good, Dan. One thing, though: your tag line (“The easier, smarter way to organize special events, from conferences and workshops to parties, gigs, and receptions.”) has been TitleCased in CSS, making it sound a little stilted.

Tim BeadleTim Beadle at 10.11.06 / 14PM

Congratulations! For what I’ve seen of EventWax it’s pretty nifty and well rounded :)

UJS should be in rails core by now, it’s incredibly useful :D Thanks for that!

Nicolás SanguinettiNicolás Sanguinetti at 10.11.06 / 21PM

Hey Dan!

Just wanted to note that at Zaadz we’ve been using it in a limited capacity in production (ironically – we first used it in our events section…) for over a month!

My favorite parts are that it has greatly decreased the amount of Javascript necessary to do the same things the Rails helpers were doing and – more than that – the fact that it’s encouraging us to go back and use better practices when adding features with Javascript (making sure there’s a fallback equivalent to the whizbang AJAXy features, for example)..

Thanks again – we look forward to what’s coming with UJS!

Jacob StetserJacob Stetser at 11.11.06 / 16PM

Cheers for the feedback, people!

DanDan at 12.11.06 / 23PM

What’s the advantage of using apply_behavior in Rails to doing Event.addBehavior in JS? I’ve been using LowPro but doing everything by hand… I still don’t quite get RJS.

Mike StenhouseMike Stenhouse at 14.11.06 / 11AM

Mike: Some people just like to work within Ruby as much as possible but there are some further advantages that come with using the make_* behaviour helpers in UJS which essentially wrap what could be quite complex pieces of javascript in a single ruby call.

Saying that though, recently I’ve been finding working with Low Pro on it’s own is really nice. You need to be comfortable with JavaScript though so it’s not for everyone.

DanDan at 14.11.06 / 13PM

About This Article