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.
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 …
Latest posts by Edward (see all)
- Java Swing Model View Adapter Mediator - September 14, 2015
- Tomcat 8 on Java 8 Behind Apache on CentOS - April 16, 2015
- Getting a Primitive Data Types Wrapper Class in Java - November 13, 2014