Using CF and AJAX to dynamically show and hide divs based on database values

Showing and hiding form and document elements on a page can be pretty useful when you're trying to walk a user through a process and you only want them to interact with controls that are geared towards to the task at hand.

There are a number of ways to do this but a very simple way is to nest your form controls inside of a div and then reference the div in your JavaScript code. Here's a simple example where I'm querying a database to figure out the behavior of how a page should act based on which option a user selects from a cfselect control.

First off, I've got a SQL Server table named PropertyDataType and it has a primary key named PropertyDataTypeCode (a simple varchar). This app will allow users to create custom properties that describe the configuration settings of various sophisticated machines in a factory. The machines can have different properties and the values of a machine setting or property will fall into 1 of 3 categories...

• True or False (As in activate Flux Capacitor? Yes/No)
• Numeric Ranges (Min/Max Values - like temperature setting between 38 and 42 degrees)
• Custom Select Options (User Defined Drop Down List of choices)

So what we're essentially doing here is allowing the user to create a matrix of configuration choices specific to a machine. This is important because these machines will be used to plan and track production processes and each production run (or job) will require that a machine be configured in a specific manner to accomplish a job step in the production process.

Moving on, we also have a 3 other tables in play...

• System (A simple table that uniquely identifies each machine)
• SystemProperty (A table with a compound primary key that uniquely identifies one or more properties of a machine along with the property's custom setting values defined by our user)
• SystemPropertySelector (A table that will hold user defined options created by our user should they elect to create a property that will be configured using a customizable drop down list)

So what we're trying to do is show or hide page elements based on what type of property the user is going to create. We give the user a list of property types that they can create by querying the aforementioned PropertyDataTypeCode table which gives us a list of property types and the behavior of our page. The possible behaviors are to show Min/Max controls, show a subgrid (a cfgrid that will look to our SystemPropertySelector table that holds the values of user defined drop down lists), or finally to show nothing (none - which would be the case if they chose to create a property that had a simple boolean answer).

The system.cfc method getPropertyDataType is shown below...

This just simply gets our list of property types that a user can select from. Note that the following cfselect control references the query returned by this cfc. It also has an onChange action to call a js function named controlViewState.

The controlViewState function will call a remote access method in the system.cfc that will get the behavior of the page for us so that we can decided which document elements to show and hide...

The controlViewState function's callback handler is actually responsible for showing and hiding the named divs that hold our controls. So for instance if the user selects one of the following choices from our option list then we will dynamically show and hide divs based on what the Behavior column of the PropertyDataType table tells our code what to do...

So if we were to select Decimal as our Data Type then we our code would call up the database and figure out that we need to hide everything except for the controls responsible for showing Min/Max values.

If by chance we chose Selector then all controls are hidden and then we show the subGridControls div and refresh the cfgrid (this is done so that we can prepare the grid to be rendered properly - if not then it is distorted and the cfgridcolumns would be initially hidden to the end user).

The page layout is pretty simple but it is worth mentioning that you definitely don't want to forget the id attribute of your divs...