It’s the Little Things
When I came to work here, I was using the Prototype/Scriptaculous one two punch. Several of my peers were talking about jQuery, and how great it is. I had, however, already found my JS framework, though, and stuck with Prototype.
Over time, I grew tired of working around jQuery. I started figuring out how it worked, and about that time I re-realized how great life is for people who make web sites. We have jQuery, we have Firebug, we have CSSEdit, Textmate. Life is good.
Since I sat down and figured out how jQuery works I haven’t given Prototype even a sideways glance. I don’t know what state the effects are in. No clue about the footprint. jQuery has completely won me over, and here is why:
I recently had a little problem where I needed show some form fields dependent on the state of a checkbox. If the checkbox is clicked, show the hidden ( .dependent{ display: none } ) fields:
$('input[type=checkbox]').click(function(){
$(this).parent().find('div.dependent').show();
});
There was a side effect here of prematurely showing nested checkboxes
Okay well, what about the child selector? You know, the one where you put “body > p” which selects paragraphs that are direct children of the body tag. Seems like a good choice, right. But then I’m looking at my jQuery, and because I’m passing the clicked input, and getting its parent: $(this).parent().find(‘div.dependent’), it looks like the only place that even sort of seems like it will work is to just put it in front of the div. So I tried that.
$('input[type=checkbox]').click(function(){
$(this).parent().find('> div.dependent').show();
});
Ta-da. This whole big long story, 2 code snippets, 3 images so I can illustrate the kinds of things that make me happy to be making websites. I hope the dev team gets some use out of this code. Thank-you jQuery.
P.S. While this isn’t my exact production code, its similar, so if you have an approach that is much cleverer than this, I’ve left comments on.