Sta.sh
One of the most time consuming tasks involved with running a large website can be upgrading libraries. Of course we do this all the time, but sometimes those libraries are used across the entire site. One of those libraries that we use at deviantART is jQuery. Unfortunately, we got a little bit behind with keeping jQuery up to date and we were still on version 1.7. But over the last couple of months, #dt has upgraded the whole deviantART network to jQuery 1.9. As you may already know, this upgrade can be slightly challenging due to the number of changes that break backwards compatibility.
The first thing that everyone attempting to upgrade from an earlier version should use is the new jQuery.migrate plugin. This plugin is bundled with jQuery 1.9 and will generate console warnings when deprecated features are used. Without a doubt, this is the most helpful tool available for finding parts of your site that could break. To use the plugin, first include jQuery, then include the migrate plugin:
<script src="/styles/js/jquery.migrate.js">
Also make sure that you enable warnings and traces, so that you can gather as much debugging information as possible. To do so, add this immediately after migrate.js:
jQuery.migrateTrace = true;
One of the significant changes in jQuery 1.9 is the removal of .live() and .die(), which have been superseded by .on() and .off(). Last summer, during our yearly summit, these calls were almost entirely removed from our JS. The last couple of live/die calls have now been completely removed.
Another significant issue that had to be resolved was the removal of .data('events'). Although very little of our JavaScript actually used this feature, not addressing it would have caused some serious issues. Resolving this was pretty straight forward and just required maintaining our own cache of attached events when necessary.
There were a couple of other small issues, but one of them was extremely important and it isn't terribly well explained in the migration guide: separating .prop() from .attr(). Simply put, .attr() is for changing HTML markup and .prop() is for changing the properties of a JavaScript object. Without jQuery, you would use element.setAttribute() to change the attributes of an element. Properties would be changed by directly assigning a value to them: element.checked, element.className, etc.
Sometimes the HTML markup and the element properties mirror each other, and sometimes they don't. Here are some examples:
An input element without a type attribute is actually a "text" input:
$node.attr('type'); // undefined
$node.prop('type'); // "text"
The "checked" attribute of an checkbox only reflects the default state, not the active state:
node.checked = false;
node.getAttribute('checked'); // "checked", even though the checkbox was ticked off
The "value" attribute of an input only reflects the default state, not active state:
// assuming the value changed to "rubber duck" (by typing into the input) before code is run...
node.value; // "rubber duck"
node.outerHTML; // <input type="text" value="foo">
$(node).parent().html() // same as above, even with jQuery
node.getAttribute('value'); // "foo"
Note that jQuery does consider the value of some properties when using .html(), see this example.
The "href" attribute of a relative link does not represent the full link with protocol and domain:
$node.attr('href'); // "/test"
$node.prop('href'); // "http://www.deviantart.com/test"
The "selectedIndex" property of a dropdown tells you the currently selected option index:
$node.attr('selectedIndex'); // undefined
$node.prop('selectedIndex'); // 2
As you can see, there is a very real difference between .attr() and .prop(). For a long time jQuery has been munging the returns of .attr() to reflect property values. Inevitably, this leads to confusion or outright broken code. Although this split is probably one of the most difficult changes to make correctly, we fully support the decision that jQuery has made.
So, in conclusion, what is the best way to use .attr() and .prop()? This is our recommendation:
if (cond) {
$(node).attr('checked', true);
} else {
$(node).removeAttr('checked');
}
// Better
$(node).prop('checked', cond);
// Best
node.checked = cond;
#dt hopes that this post will help you with your upgrade to jQuery 1.9 and beyond!
Ciao,
Dan