Upgrade from jQuery 1.x to jQuery 2.x

Question

I am trying to upgrade from jQuery 1.x to jQuery 2.x.

I have jQuery 1.8 and jQueryUI 1.8, and now I want to upgrade to jQuery 2.x and enhance my web app.

So my question is what to change and remove, like for Ajax and events.

Like these errors I am talking about

Uncaught TypeError: Object [object Object] has no method 'live'

Did functions like .on() and .ajax() change any? (I know .live was deprecated).

P.S. I have to add Zurb Foundation 5 which uses jQuery 2.

Answer 1

In jQuery 1.9, several methods were removed that were available in prior versions of jquery.

If you are using those methods, then yes, you will run into problems.

Otherwise, no you will not run into problems.

Using the jQuery migrate plugin that you mentioned will solve all of the problems that you could possibly have with upgrading from 1.8 to 1.9+(which includes 2.x) and it will also inform you of any methods you are using that have been removed when you look at the console. The migrate plugin is the best way of upgrading jquery from 1.6x-1.8x to 1.9+/2.0+. Include jquery 2.x, then include the migrate plugin, then open your console and replace old methods until the migrate plugin stops giving your warnings. At that point you should be able to safely remove the migrate plugin.

Answer 2

1. Do not use offset option in position properties, e.g. code $element.position({my: 'center center', at: 'center center', offset: '5 -10'}) should be replaced with $element.position({my: 'center center', at: 'center+5 center-10'}).
2. Do not use $element.bind(), $element.live(), $element.delegate() to assign event handler, use $element.on().
3. Do not use browser sniffing with $.browser, try to use feature detection instead ($.support).
4. Do not use deferred.isRejected(), deferred.isResolved(), use deferred.state() instead. Do not use deferred.pipe(), the deferred.then() method should be used instead.
5. Do not use the $elements.size() method, use the $elements.length property instead. The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call.
6. Checkbox/radio state in a .trigger()ed "click" event now has the same state as in a user-initiated action.
7. Changed naming convention for .data() keys, e.g., ui-dialog instead of dialog. (http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys).
8. Do not use $.ui.contains(), use $.contains() instead.
9. Each widget instance already has unique identifier this.uuid and event namespace this.eventNamespace = "." + this.widgetName + this.uuid. Do not generate similar things manually.
10. Do not use $element.focus(n) - it is deprecated. Use setTimeout(function() { $element.focus(); }, n);.
11. Do not use $element.zIndex() - it is deprecated.
12. Do not use $.ui.keyCode.NUMPAD_* constants - they are removed.
13. Do not use $element.data('someWidget') to retrieve widget instance. Use instance() method: $element.someWidget('instance'). Unlike other plugin methods, the instance() method is safe to call on any element. If the element is not an instance of the given widget, the method returns undefined: $('<div></div>').dialog('instance') /* returns undefined instead of throwing Error */.

Original upgrade guides and full list of changes:

• jQuery Core 1.9 Upgrade Guide
• jQuery UI 1.9 Upgrade Guide
• jQuery UI 1.10 Upgrade Guide
• jQuery UI 1.11 Upgrade Guide
• jQuery UI 1.12 Upgrade Guide

Answer 3

If you are thinking of upgrading to jQuery 1.x to jQuery 2.x should consider this and take these steps :) :

1.No More Support for IE6/7/8

I still think it’s a little premature to abandon IE8 but the team couldn’t wait any longer. jQuery 2.0 removes all the legacy IE code for node selection, DOM manipulation, event handling and Ajax.

2.Custom build feature has been refined in version 2.0

so you can exclude any of 12 unused modules and shrink jQuery below 10Kb. The modules which can be omitted are: List of Functions

Should I Upgrade?

It’s important to understand that jQuery 2.0 has API parity with jQuery 1.9. There are a small number of bug fixes but no new features.

However, if you’re one of those lucky developers who has dropped support for IE6/7/8, grab jQuery 2.0 and don’t look back.