jQuery Upgrade, .attr and .prop - 1.2.6 to 1.9.1

Question

I'm trying to upgrade a large number of sites at work from very old versions of jQuery (1.2.6, 1.4.3) to the latest version (1.9.1). Things are going pretty well - the Migration script does most of the legwork even though that's only for 1.6.4 to 1.9.1, I think I've got most of the other changes that need sorting.

There's a couple of issues I've run into though, with the main one being the changes from .attr() to .prop() - as all of our code uses .attr() and some breaks if we just change it to use .prop(), specifically some links which are used for filtering products in a store - these invoke AJAX calls and do other processing on being clicked.

My initial "fix" (in EXTREMELY large air-quotes) was based on simply redirecting calls from one to the other:

$.fn.attr = $.fn.prop;

I'm sure this introduces a whole world of bugs, although it fixed that which was initially broken. Since then, I've only noticed one further bug caused by it (so far, anyway), which is that it causes the href attribute (which may be an anchor starting in #) to return the full normalised URL - http://jsfiddle.net/eT6xE/1/

<a href="#something"><span>Product Details</span></a>
<div></div>

$('div').append( $('a').attr('href') );
$('div').append( '<br />' + $('a').prop('href') );
// #something  \n  http://fiddle.jshell.net/eT6xE/1/show/#something

Given that it's the only bug I've noticed, I've played around a little and come up with a workaround for it - http://jsfiddle.net/M92CE/1/ - which seems to work in re-introducing the original functionality. Even though that seems like a fairly clean solution for the href attr/prop issue, I can't help but feel that the initial fix is ... a long way short of what it could be.

Is there any "standard" way for re-introducing this functionality, and if not, is there any nicer way of doing it?

Cheers.

Answer 1

jQuery 1.9 removed a lot of older features that had been deprecated in previous versions. Moving from jQuery 1.2 to 1.9, you are almost certain to hit quite a lot of them, as you've found.

Fortunately, jQuery 1.9 has a companion library called jQuery Migrate for backward compatibility with older versions, which puts back all the old deprecated features that were removed in 1.9.

If you need to get your old code back up and running with the newest jQuery version, use jQuery Migrate to get it working.

However, bear in mind that the purpose of the Migrate library is to help you make the transision to the newer features, not to allow you to leave your code stuck in the past. So use Migrate to get the code working, but then you need to start looking at changing your code so that you don't need Migrate.

Depending on how much code you have, that may be quite a bit of work, but having Migrate there allows you to make those changes one-by-one, rather than having to fix everything at once.

Hope that helps.