Web design purity

If you’ve been paying attention to web design recently you will have noticed that it has been cleaned up a lot. The different parts of the system have been divided up into layers for their tasks and people have discovered the benefits of keeping things nicely seperated.

Chris Heilmann has an excellent example of a couple of list boxes that can be filtered that doesn’t break down if javascript is turned off. If you run the example with javascript turned on you see two list boxes and the second one is filtered based on what is selected in the first one. If you have it turned off you have a single list box with the relationship visible in the list box. It’s all rather neat. He is able to use proper HTML to define the list box you see if javascript is turned off and if it is turned on the javascript reads the HTML for the information for the lists and then creates the new combo boxes.

What happens if the relationship is messier than that? I have an application where I have two lists, one a list of customers, the other the list of applications they run. A customer can have multiple systems and the systems will be used by multiple customers. If in the non-javascript version I do my list in the same way it will go on for miles. I would rather simply have the two lists and allow the user to select an incorrect system. I can then validate at the server side. So far so good. That is a reasonable solution for what to do without the javascript. The user doesn’t make mistakes about the system too often and if they do make one, it will be caught.

Now I need to build the javascript side. This should simply filter the list of systems to only include those used by the customer. How do I do that? There is no information about that relationship within the HTML. If I’m really neat I should have no javascript directly within the HTML and I don’t think generating the javascript is particularly great either.

In the end I embedded some javascript in the HTML which setup a variable containing the relationship. The javascript for adjusting the lists simply uses that variable. It’s not too pretty but it solves the job and as far as I can see is the best compromise. I’m already looking at the customer and system lists so generating the information about the relationship seems to make sense. If javascript is turned off it’s just a bit of dead text to the browser so it doesn’t hurt anything.

Is there a better way to solve the problem?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s