|
|
How to make context-sensitive forms with Ajax and Prototype
Article created: Sept 30, 2007
Article by: Jeremiah Faith
The situation I'm a graduate student and I ran into the following challenge when dealing with microarray data. However, I'm going to translate the challenge into a car selection example, so you don't have to be familiar with biology to understand the application (but here's the microarray example if you want to try it out).
Let's say we have a database that has massive amounts of information about cars (e.g. manufacturer, model, antilock brakes, year, price, color, etc...). Our goal is to allow people to use this information to narrow down a set of cars that they might want to buy (or at least research in more detail). For example, they may want a safe, affordable car for their kid, so they might want limit their car list to those with antilock brakes that are less than $10,000.
If we knew ahead of time that they were interested in price and antilock breaks, we could provide them with a form to let them fill out the relevant information (i.e. <$10,000 and must have antilock brakes). But of course, we don't know ahead of time what they're interested in. Let's look at the potential solutions.
The worst solution Put all of the form information for every possible feature on one page. Clearly this will give your user HTML-clutter overload and send them straight to a new Google search.
Old-fashioned solution Using old-fashioned CGI and HTML, we could present them with an initial form where they choose the features they're interested in; then, on the following page, we could present them with the relevant forms. The problem with this approach is that the user has to make lots of decisions up front. If they change their mind or want to try different things, they need hit the back button a bunch of times and start over. Nonetheless this is a decent approach that will certainly work on virtually all web browsers.
DHTML solution With DHTML, we can use the z-axis and/or the hidden property in CSS to draw all of the potential forms. When the user makes their selection, we simple make the relevant form visible. Apple's developer site has an example of how to do this very task of creating DHTML based dynamic forms. This approach has the limitation that it is only marginally scalable. As long as you have only a dozen features or so, it won't slow your user's computer down too much to preload all of the form information in the background. However as the number of features reaches into the hundreds or more, you'll be loading a huge amount of unnecessary information in the background - most of which will never be used. This excessive preloading of data wastes your bandwidth and bogs down your user's browser and computer.
Next Page
Skip to page: 1 | 2 | 3 | 4
|
|
|
Subscribe in a reader