Ruby on Rails flashes with JavaScript accessors

Ruby on Rails has loads of cool features. One of those is the support for flashes.
As long as your HTML template follows some rules, you can use flashes to inform your user about things that happened within the last server interaction.

These rules are pretty simple, but adding the necessary things to your HTML templates is always the same thing. Since Rails teaches us not to reinvent the wheel 😉 I’ve written a neat little helper for that issue. It also comes with some JavaScript methods so you can clear flashes or show new ones within your JavaScript application flow.

The following 3 steps are required in order to make things work:

1. Update your CSS

Your CSS should contain something similar to the following code snipped:

#notice { background:#2e2; color:#222; }
  #warning { background:#ee0; color:#222; }
  #error { background:#e22; color:#fff; }
  .flash { padding:10px; text-align:center; margin-bottom:20px; }

That’s just for making things look good ;-).

2. Modify your HTML template

In your HTML template, find a nice place where the flash messages should appear and insert

  <%= render_flash_messages %>

This will include all HTML code necessary for the flashes as well as all the JavaScript code required for the in-browser messages you want to happen.

3. Add some global magic

Add the the following “render_flash_messages” method (that’s the beast that does all the work) to your application_helper.rb:

def render_flash_messages
    html=  ""
    js =  "var RUZEE = window.RUZEE||{};\\n"
    js << "RUZEE.Flash = { clear:function() {\\n"
    js << "  Element.update('flash','');\\n"
    js << "} };\\n"
    ["notice", "warning", "error"].each do |type|
      ve = visual_effect(:highlight, type, :duration => 2.0) + "\\n"
      unless flash[type.intern].nil?
        html << content_tag("div", flash[type.intern].to_s,
                                   :id => type,
                                   :class => "flash")
        js << ve
      end
      js << "RUZEE.Flash.#{type} = function(msg) {\\n"
      js << "  Element.update('flash','"
      js << content_tag("div", "'+msg+'",
                               :id => type,
                               :class => "flash")
      js << "');\\n  " + ve + "};\\n"
    end
    content_tag("div", html, :id => "flash") + javascript_tag(js)
  end

That should do the trick. From now on, your flashes should work like they did before, except they now have a neat script.aculo.us based highlight effect.

4. JavaScript it (optional)

You can also set flashes from within your browser. Try, for example, the following in one of your .rhtml files:

<%= link_to_function "Click me!",
      "RUZEE.Flash.notice('Cheers, mate!')" %>

It will display a link and once you click on it, a notice flash will show up, nicely highlighted from yellow to green, thanking you for your click ;-).

The following JavaScript methods are available:

• RUZEE.Flash.notice(msg) : show a notice flash
• RUZEE.Flash.warning(msg) : show a warning flash
• RUZEE.Flash.error(msg) : guess what 😉
• RUZEE.Flash.clear() : clear all flashes currently visible

So what you’ll get is a generic flash helper, that can be reused within all of your applications, is configureable through CSS, blinks via script.aculo.us’s highlight effect and comes with JavaScript support methods for all your DHTML pleasures.

[tags]ruby, rails, flash, highlight, javascript, ruzee[/tags]