Stateful Links and Standards

by Jay

Over at the Signal vs. Noise blog there’s an interesting piece on implementing stateful links in web applications. The problem with their approach is that it requires you to add custom attributes which either break the validity of your XHTML or require a custom DTD. Writing a custom DTD adds work, and breaking standards is not something that a professional web designer should do unless absolutely necessary.

The idea is good, but what can be done to improve the implementation and preserve standards compliance?

Here’s the code to the link with the custom attributes:

<a href="#" id="editLink" onclick="toggleEdit()"
     activetext="I'm done editing" activeclass="activelink">Edit</a>

The first thing that jumps out is that this block of code has an ID attribute – in this case an ID of “editLink”. Using an ID rather than a class indicates that there is only one of these items on a page – you can’t have multiple elements with the same ID attribute. Therefore, we can use the DOM to access this element very easily:

editLinkElement = document.getElementById("editLink");

So now we have a DOM representation of that element. Instead of explicitly adding the non-standard attributes in our XHTML, we can use the DOM to add those custom attributes manually. Here’s an example of the code required to do this.


function addEditLinkAttrs() {
   editLinkElement = document.getElementById("editLink");
   newActiveTextAttr =
      editLinkElement.setAttribute("activetext", "I'm done editing");
   newActiveClassAttr =
      editLinkElement.setAttribute("activeclass", "activelink");
}

There’s a few extra line breaks so the code sample will fit on the page, but that should give you a general idea of how to do this.

We can do the same with multiple elements based on a class rather than an ID as well.

Plus, while we’re at it, adding onclick handlers in XHTML mixes content and behavior. We’ve already established that XHTML serves as our content layer and CSS as our presentation layer – however, we shouldn’t mix content and behavior any more than we should mix content and presentation. Event handlers can just as well be added into our JavaScript behavior layer as well. All we’d need to do is add another line to our script:


function addEditLinkAttrs() {
   editLinkElement = document.getElementById("editLink");
   newActiveTextAttr =
      editLinkElement.setAttribute("activetext", "I'm done editing");
   newActiveClassAttr =
      editLinkElement.setAttribute("activeclass", "activelink");
   newOnClickAttr =
      editLinkElement.setAttribute("onclick", "toggleEdit()");
}

And now our XHTML no longer has any custom attributes, and our content, presentation, and behaviors are on completely different layers. Plus, we haven’t sacrificed standards compliance, and writing a few lines of JavaScript is easier than writing a custom DTD and deploying it across a site or application.

One of the more disturbing trends about the “Web 2.0” hype is that we risk letting standards fall by the wayside just as the web hype of the decade saw the proliferation of junk markup and invalid code. Yes, if you’re deploying an application on an Intranet, who cares about some extra attributes? But at the same time, part of the new professionalism in web design is making sure that we abide by standards whenever possible.

Advertisements