Trip Log Page
The requirement is that a web page be sent to the browser and that a bunch of processing be done to manipulate HTML form content in the browser with no further server interaction. The data consists of rules for when to show and when to hide various form fields, as well as data to populate lists in the form conditionally on the selections from other lists. Imagine a web site where you pick the make of a car (Ford, Chevy, Toyota…) and then the next list contains only models from the selected car company (Bronco, Mustang, Corvette…). How would all of the models of all of the car companies be sent to the browser so that an extra query isn’t needed for the model field each time the make selection changes?
The company that I work for uses AJAX for another “product” but this seemed impractical since generating the web page takes a lot of processing time to get and parse data from a database. Doing that parsing each time a single field changes is not at all efficient. Plus, the other “product” usually has a few large lists on a page and my forms might have a hundred.
Option 1 was to use data attributes available in HTML5 and store all of the extra stuff that way. I opted against this because I would need to convert a two-level tree structure into some form of string that I could parse on the client. I hate writing code that parses or compares strings over and over again because I was schooled in writing very efficient code back when I worked on high speed search algorithms in the biotech field. In that field, writing one extra “if” test in a loop could make a product too slow to sell. This option would have made it easy to find the data content while looking at the visible tree of form fields, which would have been a nice side-effect.
Option 3 was actually a bunch of failed ideas that never got past the first threshold of analysis. For instance, I could store XML data in an HTML5 data attribute or in one of those weird data elements that I have never used before. Or how about having a separate HTML select field for each variation of a list and then just displaying the one that has the appropriate data? That’s just another way to use the DOM and would add some work to hide and disable the unwanted “select” fields.
Above is a rough estimation of what the data will look like. This is taken from a working test case that doesn’t have a lot of content. But the idea of declaring the global variable and initializing it to literal objects, should be fairly clear. I manually added a lot of space and indentation to make it a little more readable in this example.