Recently I decided that it's time to start paying a bit more attention to improving the visual presentation of one of my sites. The site's built in ColdFusion with lot's of nifty CF Ajax stuff thrown in. CFDiv's, CFWindows, and Pods here and there too. So, I figured since I'm not too bad at coding in CF - at least I can usually Google my way through most of the snags I run in to - I wanted to try challenging myself a bit by taking on something fairly foreign to me. Ajax.

I know the basics of Ajax. Asynchronous JavaScript with XML - Sending and receiving Http requests and responses to a server to return data to a site without refreshing the documents. However, I had little experience actually taking on an Ajax project. But if that wasn't difficult enough, I wanted to get really frustrated, so I decided to use a JavaScript library that I had little if any experience with - Entrance JQuery.

Now I've seen a lot of very groovy examples of the nifty UI tricks that can be done with JQuery. They are cool. But I really wanted to learn how to use JQuery for my specific needs. So, I did. I choose to launch my campaign with a real world example. So for my project, I mapped out what I wanted to do with ColdFusion, JQuery, and Some CFAjax stuff. Here's what I planned out ... First, I wanted to add a US database to my site, SEOMasterList.com, to build out some dynamic pages. The reasons for that should be quite apparent. I'm planning to obtain rankings and possibly monetize the site.

Next, I wanted to add some cool visual effects while providing improved functionality to the site, and possibly give visitors a better experience.

And finally, I just wanted to see if I could actually do it - two weeks in to it, I finished it. I have got to admit I spent a hell of a lot of time learning while trying to get the site done - someone with experience could have probably launched it in a matter of no time. But, I learned a lot.

Once I modified, installed, and built out the components to accommodate the addition of the database, I set up another component to dynamically bind the results from the database to two selects in a form. This was very challenging - I spent the better part of two days just trying to get the bindings to work. Luckily, I found a cool ColdFusion script and modified it to output my database queries to XML. That came in really handy. The first go at trying to output 80,000+ records to a single flat XML file didn't work out to well. I ended up rebuilding the data CFC's several times in order to get what I needed. I ended up with a 1.4 MB XML file that I'm now using to bind to the data in the selects.

After tackling that part of the project, I wanted to introduce some visually appealing effects to the site so I picked up the latest JQuery code and sent it up to my site. After some effort, I was successful in creating a pretty slick interface for my Ajax loaded form. Through the use of some nifty ('#div').show(),('#div').hide () functionality on the form page, I was able to add and remove elements of the page which weren't necessary at every stage of the form submission process. This proved to be tougher to implement than I had expected. Up to this point I have a form bound by CFC's to data, an asynchronous form handler to process a form submission, and some nifty JQuery going on to assist in dressing up my application modifications. All in all. I think it went really well - and I learned a whole hell of a lot doing it. If you want to see what I did ... have a heart ... I'm an Ajax nOOb. Check it out on SEOMasterList ...