No no no, of course jQuery didn’t fail me, I did!

As anyone who does anything in the publishing field (be it code or text), the more you go over the letters and numbers, the greater the chance of missing something that is incorrect.  It’s tough to take a step outside of something that you’ve been working on so intently to get that fresh perspective.  Yesterday, I blogged about jQuery failing me, and shortly after, I found that it wasn’t jQuery failing me, but my own overthinking.

As a huge chunk of my job, I have to come up with creative solutions to really difficult problems.  Most people don’t get to see what programmers have to do from the inside and would probably go insane having to spend a few minutes in our heads (we sacrifice social skills for sanity).  The problem sometimes becomes that creative thinking.  I sat and struggled for so long over something so insignificant that it makes me annoyed today to look back on it.

Yesterday’s mention of the situation prompted me to write this blog, maybe to save myself or anyone else from a headache or two.  I was once again working with a jQuery plugin that helps streamline the dynamic building of drop downs.  I mentioned this a few weeks ago.  Yesterday’s trick was to create an unobtrusive script that would detect all of these drop downs on any pages and use the Ajax method to build the dependent drop down.  A very slight change (the part that somehow took me 2 days to think through) was simple, it relied on grabbing the correct drop downs from the correct forms.  I like to make update forms on pages where it’s just a giant listing of all the fields, and updatable right on the page, then just one easy check for proper submissions rather than having to loop through and figure out what ID you’re on with some silly formula.  It makes things efficient (though not necessarily following WC3, but considering the browsers can’t get on the bandwagon to implement standards, I think I can let it slide).  So what I did was give my parent drop down a class name, and then was able to construct a happy little javascript onclick function.
$(function(){
$(”select#country”).change(function(){
// Below functions come from the jquery.selectboxes.js plugin, yay
//REMEMBER that javascript is CASE SENSITIVE!!!
$(”select#state”).removeOption(/./); //removes all options
$(”select#state”).ajaxAddOption(”#application.root#search.cfm”, {country: $(this).val(), ajax: ‘true’}, false);
})})
BECOMES
$(".countryFlex").change(function(){
// Below functions come from the jquery.selectboxes.js plugin, yay
//REMEMBER that javascript is CASE SENSITIVE!!!
var theForm = this.form;
var theState = theForm.state;
$(theState).removeOption(/./);
$(theState).ajaxAddOption("#application.root#dynDrop.cfm", {country: $(this).val()}, false);
})

So then what we have is simple and elegant and won’t cause the system to break if javascript isn’t available.  The country and state dropdowns are created using Coldfusion queries to set it up, are named appropriately, and then can be filtered down via javascript and our ajaxian friends.  The dyndrop.cfm file is basically a page that just grabs queries based on the information sent to it (url vars) and formats it and sends it back in the form that the selectboxes needs it.

By now you’re wondering what it was that I was stuck on.  Simply, I was trying to get the state field in every way except the simplest.  I was trying to use jQuery selectors in all sorts of fancy combinations, trying find and filter and every combination of css/xpath selector possible.  I could get it to work on solo forms like the ‘add’ form, but not on the page listing.  In the end, it was just simple javascript that I learned years ago.  Sometimes it pays to be a little less smarty pants.  It just reminds me that sometimes I get a little fun poked in my direction, I often hear ’I don’t know how someone so smart could be lacking in such common sense.’  Though I hate to admit it, it was definitely one of those situations.