I have no idea why it has taken so long for me to figure out how to get 404 pages to be rendered in Rails. The problem I think was mostly due to my lack of know-how of how routes.rb works. What I wanted was very simple:

• If a controller isn’t found then display a 404 page
• If an action isn’t found then display a 404 page

I didn’t want to use just a static 404.html page either. So, here is the quick and simple solution:

• Catch invalid controllers in routes.rb: at the end of routes.rb add the mapping line:

  map.error '*url', 
      :controller => 'errors', 
      :action => 'error_404'

  This uses uses the ErrorsController with its error_404 action which of course uses an error_404.haml template.

• Catch invalid actions in application.rb: in application.rb add:

    def method_missing(*args)
      render :template => 'errors/error_404'
    end

  This makes missing controller methods (a.k.a. actions) render the errors_404 template too.

In my quest to simplify my JavaScript programming life I’ve added a new weapon to my arsenal: the Multiple Events Handler. (I have no idea what else to call it, so it’s MEH for now.)

The problem I’ve been trying to solve for a while was how to bind click events on items in a list or in a table without having to bind events to each item. For example, let’s say we had an ice cream flavor picker:

In this Web 1.0 way we have javascript:something for each item:

  <li><a href="javascript:alert('Arr... Rrrrrrasberry!');">Rrrrrrasberry!</a></li>

Not very nice. I’ve taken to adding data-* attributes to describe the data, so if we had jQuery we could at least bind to all the anchor tags and use the data-flavor attribute to figure out which one was really clicked:

  <ul class="mehexp-2">
    <li><a data-flavor="Vanilla">Vanilla!</a></li>
    <li><a data-flavor="Chocolate">Chocolate!</a></li>
    <li><a data-flavor="Rrrrrrasberry"> Rrrrrrasberry!</a></li>
  </ul>
  <script type="text/javascript">
    (function ($) {
      $(".mehexp-2 a").click(function (event) {
        var flavor = $(this).attr("data-flavor");
        alert('Arr... ' + flavor + '!');
      });
    })(jQuery);
  </script>

That’s better, but what if the list grows dynamically? Well, sure, there’s the new jQuery live() event handler, but my latest pattern seems to work just as well. Instead of binding the click on each element, just bind the click on the container. In this case, the container is the UL tag. And for each element you assign its action using data-action.

<h3>Pick Yer Flavor, Matey!</h3>
<ul class="mehexp-3" style="color: #00a; text-decoration: underline;">
  <li><a data-flavor="Vanilla" data-action="flavor-select">Vanilla!</a> <span data-action="flavor-delete">X</span></li>
  <li><a data-flavor="Chocolate" data-action="flavor-select">Chocolate!</a> <span data-action="flavor-delete">X</span></li>
  <li><a data-flavor="Rrrrrrasberry" data-action="flavor-select">Rrrrrrasberry!</a> <span data-action="flavor-delete">X</span></li>
</ul>
<input type="button" class="mehexp-3" data-action="flavor-add" value="Add anotherrrr" />
<script type="text/javascript">
  (function ($) {
    $(".mehexp-3").click(function (event) {
      // Do we have a data-action?
      var action = $(event.target).attr("data-action");
      switch (action) {
        case "flavor-add":
          var flavor = $.trim(window.prompt(
              "So ya want ta add a flavorrr? Enter it here!"
              ));
          if (flavor !== "") {
            // Add it. Sorry it's so verbose. Stupid
            // WordPress keeps editing the text.
            var aa = document.createElement("A");
            $(aa).attr("data-action", "flavor-select")
                .attr("data-flavor", flavor)
                .text(flavor + "!");
            var li = document.createElement("LI");
            $(li).append(aa);
            $("ul.mehexp-3").append(li);
          }
          break;
      case "flavor-delete":
            // Bubble up until we hit the LI.
            var t = event.target;
            while (t.tagName != "LI") { t = t.parentNode; }
            if (t) {
              $(t).empty();
              // For SOME reason I can't remove(). Oh well
            }
            break;
        case "flavor-select":
          var flavor = $(event.target).attr("data-flavor");
          alert("Arr... " + flavor + "!");
          break;
        default:
          alert("Avast! I know not what ye wanted! (Action: " + action + ")");
          break;
      }
    });
  })(jQuery);
</script>

The interesting thing about this is that you can put actions at any stage. And since events bubble up, if you have an image inside an anchor tag, you could modify the above code to walk up the DOM’s parent element chain until it hits the nearest data-action.

So, MEH isn’t so “meh” after all…