John Cox

ColdFusion and Scriptaculous

I am a bit of a newbie with Coldfusion, and it always helps me to write out how I do things so I can learn them just a bit better for the future use. I have over the past month been porting my needs from Xaraya to Coldfusion (from scratch) to allow me to continue with the same development paradigms that I am comfortable with. My framework (Sage) is basically done now, and I have begun to work on the UI and functionality. One of the things that I mark as a lesson learn from Xaraya is to make the UI as simple as possible, and only do what is necessary. This is one of those things that I think Xaraya needs to improve on, and if I had some time outside of my job, I would probably do just that.

One of the complexities that I am facing with my job at Impro and specifically the e-commerce vehicles is the relationship between brands, models, and items. While every e-commerce package has these complexities on some level, this is even more so, as there are other relationships to take into account, such as model groups, proxy sets, etc. Since toner and ink comes with so many different brands, makes, models, the business profit point is to manage these relationships to be ahead of the competition. The more data that you can take away from the relationships between items and customer needs, the more likely the sale.

It isn't the relationships that are complicated in this, but rather how do you set the relationships and show them afterwards in the UI? If we were talking about 100 items, then this would not be that big of a deal. Instead, we are talking about hundred thousands of items with tens of thousands of models. Then you take into account the management of how to report from each of these, and you have a bit of an issue.

Enter Scriptaculous for me. Instead of a cluttered interface, I am using a simple auto-complete text box to assign the relationships. Unfortunately for me, most of the tutorials are centered around Rails, since that was what Scriptaculous was written for, so I had to work from Ruby tutorials on down, but the syntax is not very difficult when you understand the basic examples. Here's a little code on the front end:

<div class="optional"> <label for="add_model">Add Model:</label> <input autocomplete="off" id="add_model" name="model_name" size="10" maxlength="250" type="text" value="" /> </div> <div id="model_name_auto_complete" class="auto_complete"></div> <script type="text/javascript" language="javascript"> new Ajax.Autocompleter('add_model', 'model_name_auto_complete', 'applications/items/lib/ajax/ajax_model_list.cfm', {}) </script>

What I am doing here is assigning a model to a model group. The autocompleter javascript looks for the add_model id to be onblur. The model_name_auto_complete is the division that I will be writing to. Finally, I am just loading a page outside of my framework to boost the performance a little, since all I am really doing is creating a list of items that match my input.

From there, it is just a matter of creating my ajax_model_list.cfm. This looks for the model_name post var. And I load it into my cfc to match off that name:

<cfset this.items = createObject("component", "/sage.lib.items.model_management").init() />

<cfset this.get_all_models = this.items.SearchAllModelsByModelName(form.model_name) />

Which just calls this method:

<cffunction name="SearchAllModelsByModelName" access="public" returntype="query" hint="Search Models by Model Name" > <cfargument name="model_name" type="string" required="yes" />

<cfquery name="results" datasource="sage"> SELECT model_name FROM item_models WHERE model_name LIKE '%#arguments.model_name#%' ORDER BY model_name </cfquery> <cfreturn results /> </cffunction>

Obviously a little hacky at this point, because I am not using cfqueryparam, but I can't seem to find a good work around as of yet for LIKE statements.

What we are doing is just taking the input, searching on it, and returning the query back to my quick Ajax page. Once I have my results, it just becomes a matter of returning the data in a list so that Scriptaculous will understand what we are sending.

<cfoutput> <ul> <cfloop query="this.get_all_models"> <li> #this.get_all_models.model_name# </li> </cfloop> </ul> </cfoutput>

And we have our nice little auto-complete.

Now, the downside of using this for assigning relationships is I am now dealing with a string, instead of an integer for updating my relationship. I overcome this by just looking up my id based on my model name. Easy peasy. Another downside, is I am not doing a mass update. Instead of setting the relationship all at once, I am doing it one at a time. I decided on this approach since there are just too damn many models to do check boxes, or other traditional methods. One other downside is when someone does not select the model, thus not having the right data integrity at entry. Since I am doing an exact match on the model name, it should not be that much of a problem.

This code is a bit sloppy, as I am not doing much input validation, so it is still a bit of work in progress (pretty big SQL Injection hole there, not to mention XSS), but the basics should get you started on CF and Scriptaculous.

Print | Related