Thursday, October 20, 2011

Ooops, but I didn't check this item.

It is always very important to read the changelog of libraries which you occasionally put to use. I would have spent the whole day trying to figure out why my checkbox selections weren't working well but luckily enough, I read through the changelog of jQuery 1.6 a few days ago, so immediately I discovered my checkboxes selections weren't being detected properly in the code, I knew who the culprit could be.

I recently modified some sections of a client website to use jQuery 1.6 because of the .data() method introduced in jQuery 1.5, which allows you to automatically import any data- attributes that were set on the element and convert them to JavaScript values using JSON semantics. This makes it easy to store the data you'd be using later on the node itself rather than parsing the DOM later to extract it. This feature also received a major change in the way it works in jQuery 1.6. In jQuery 1.6, this feature has been updated to match the W3C HTML5 spec with regards to camel-casing data attributes that have embedded dashes. So for example in jQuery 1.5.2, an attribute of data-max-value="15" would create a data object of { max-value: 15 } but as of jQuery 1.6 it sets { maxValue: 15 }.

Before jQuery 1.6, you can check if a particular checkbox is checked with $('#myCheckboxID').attr('checked') but that no longer works as expected in jQuery 1.6+. Previously, .attr("checked") returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state.

In code that uses jQuery 1.6 or newer, the new method $(this).prop("checked") retrieves the same value as this.checked and is relatively fast. Finally, the expression $(this).is(":checked") works for all versions of jQuery.

So all I had to do was to change my previous code from $('#myCheckboxID').attr('checked') to $('#myCheckboxID').prop('checked'). If not that I had read the changelog earlier, I probably would have spent the whole day chasing around an unknown bug in my code.

No comments: