• Troubleshoot (custom) field rendering on a live Joomla website

    Starting with Joomla 3.7, custom fields have given websites the ability to add fields to contact forms. While the rendering of those fields looks alright in the administration console, you may end up,...
  • Add your own information types in Latest News Enhanced Pro

    Required: Latest News Enhanced Pro v2.5+ MyDetails It is possible to show custom information to the module's output for each item. In order to do that, one can take advantage of 2 of the hooks (events...
Thu23Jun2016
Print

How to update old jQuery scripts for compatibility with jQuery 3

jQuery jQuery Easy jQuery Easy Profiles
First published June 23, 2016
6890 hits -

 

jQuery v3.0 is considered the future of jQuery. It is a lighter, faster version and removes support to IE6-8 (like the previous 2.x branch).

Old scripts built for earlier versions of jQuery may 'break', but thankfully, the jQuery team has provided the Migrate plugin to help identify compatibility issues.

It is not possible to directly update old scripts with Migrate v3.0.0 alone (it does not support all accumulated changes made since jQuery v1.6), therefore the migration will have to be performed in a few steps.

Using jQuery Easy or jQuery Easy Profiles makes the process a little easier.

Step 0 Open the jQuery Easy system plugin (or a jQuery Easy Profiles module instance), go to the basic options and enable jQuery.

Step 1 Select the latest 1.12.x or 2.2.x version of jQuery (check which sub-versions are available at the Google CDN).

jQuery selection

Step 2 Select the version 1.4.1 of jQuery Migrate.

jQuery Migrate selection

Step 3 Set the compression to 'uncompressed', which will make the Migrate plugin verbose (it will diagnose issues and report them by generating warnings instead of restoring deprecated features and behaviors).

Javascript compression

Step 4 Open the browser's console and fix any problems in your scripts identified in the console by the Migrate warning messages (starting with JQMIGRATE). Check the list provided by the jQuery team to find out how the incompatibility can be solved. You may not have any warning, in which case the scripts do not require any modifications!

Browser console with Migrate logs

Step 5 Disable the Migrate plugin (set Migrate to 'none') and make sure the pages still work properly without it.

jQuery Migrate selection

Step 6 Select the latest jQuery 3.0.x version.

jQuery selection

Step 7 Select Migrate 3.0.0.

jQuery Migrate selection

Step 8 Check the browser's console and fix any problems in your scripts identified in the console with JQMIGRATE. Check the master list provided by the jQuery team to find out how to replace the deprecated feature. You may not have any warning!

Browser console with Migrate logs

Step 9 Disable the Migrate plugin (set Migrate to 'none') and make sure the page still works properly without it.

jQuery Migrate selection

Note Using Migrate v3.0.0 in conjunction with jQuery v3.0.x will also ensure oldest versions of jQuery UI and Mobile remain fully operational.

Useful links