As with most web projects, there’s always some little new glitch that pops up. We’ve been building and massaging our own analytics back end for Riding Resource for some time now, and the change of year from 2009 to 2010 brought some new quirks that had to be dealt with.
While there were some minor issues related to year/day calculations creating invalid dates, the bigger issue that (I think) was solved rather elegantly was choosing, via a select tag, which year’s analytics report to generate. jQuery came to the rescue, with what turned out to be a far more simple solution than I originally had envisioned.
Select tags are not exactly the most complicated things in the world. But when you don’t have a form to go with them, it’s hard sometimes to figure out how to make them be useful. Instead of having a link for every year’s report, I figured a nice little drop-down would be an elegant way to choose. But this is where the difficulty was. I wanted a single text link to the report, but I wanted to change what that link actually… linked to… based on the selection in the box.
Here’s some of the original HTML that was generated by the app:
<a id="union-county-veterinary-clinic-target" href="/analytics/show2/union-county-veterinary-clinic.pdf">PDF</a> <select id="union-county-veterinary-clinic-select" name="date[year]"> <option value="2009">2009</option> <option selected="selected" value="2010">2010</option> </select> |
Here is where jQuery came to the rescue, and some generous fellow with the handle of “kit10” on the #jquery channel on IRC on Freenode. kit10 suggested that I add a “rel” attribute to the select element, and give that “rel” attribute the value of the id of the PDF link. In this way, jQuery could look at the select element, and, when it changed, update the link. After a few machinations, here’s what popped out:
$(document).ready(function(){ // courtesy of kit10 on #jquery on freenode $("select[id$='-select']").change(function() { var target = $('#'+$(this).attr('rel')); // set the target to be the value of the rel of the selector var regex = /year=\d\d\d\d/ target.attr('href',target.attr('href').replace(regex,"year="+$(this).val())); }); }); |
To read this code in a sense of plain english:
Whenever a select element that contains ‘-select’ in the ID changes
Create a variable called target, and assign it the value of the rel attribute of the select element
Replace the href attribute of the target with the new year by using the regex of /year=\d\d\d\d/ (to match year=2009, year=2010, etc)
That was really all there is to it. The new HTML ended up looking like as follows:
<a id="1000-acres-ranch-target" href="/analytics/show2/1000-acres-ranch.pdf?year=2009">PDF</a> <select id="1000-acres-ranch-select" name="date[year]"> <option value="2009">2009</option> <option selected="selected" value="2010">2010</option> </select> |