jQuery UI 1.14 Upgrade Guide


link Overview

This guide will assist in upgrading from jQuery UI 1.13.x to jQuery UI 1.14.x. All changes are listed below, organized by plugin, along with how to upgrade your code to work with jQuery UI 1.14.

link Reminder: API Redesigns

jQuery UI 1.12 introduced API redesigns for Button, Buttonset, Dialog, Draggable, Droppable, Menu, Mouse, Resizable, Selectable, Sortable, Tabs, Tooltip, and Effects. You can read about the API redesign process on the jQuery UI Blog. Although the redesigns introduced breaking changes, 1.12, 1.13 & maintain a lot of compatibility with the 1.11 API by default. This is accomplished by rebuilding the 1.11 API on top of the 1.12/1.13/1.14 API. However, since 1.14, the default behavior is only loading the new API. If you would like to load the legacy 1.11 API as well, you can set the $.uiBackCompat flag to true.

1
2
3
<script src="jquery.js"></script>
<script>$.uiBackCompat = true;</script>
<script src="jquery-ui.js"></script>

If you find a regression from the 1.11 API, please report it in the bug tracker. Even though the 1.11 API is deprecated, it's important for 1.14 releases not to regress so that users are encouraged to upgrade even if they're not ready to use the new APIs.

link General changes

The main focus of this release was reducing the maintenance. This resulted in a few breaking changes.

link Reduced browser support

Only the latest version of Chrome, Firefox, Safari & Edge are officially supported; there is no support for any version of IE and Edge Legacy. Contrary to what was done in past releases, code supporting unsupported browsers has been deleted.

link Reduced jQuery support

Only the latest jQuery version within each major version of jQuery is supported. To make updates easier, we also run tests with a few other relatively recent versions, but we don't guarantee continued support for them in all jQuery UI releases in the 1.14.x line. Each jQuery UI version will document on which jQuery versions it was tested - both in the release blog post and in the changelog page at https://jqueryui.com/changelog/.

link The backwards compatibility flag is off by default

Backwards compatibility with the 1.11 API is disabled by default. To re-enable it (restoring the default 1.13 behavior), set the jQuery.uiBackCompat flag to true.

link Removed APIs

The following APIs have been removed:

  • $.fn._form. Instead of $( elem )._form(), use $( elem ).prop( "form" ).
  • $.ui.ie. No version of IE is supported anymore and this API already only reported IE <11.
  • $.ui.safeActiveElement. Use native document.activeElement.
  • $.ui.safeBlur. Instead of $.ui.safeBlur( elem ), use $( elem ).trigger( "blur" ).

link Files & directory structure

There have been some minor changes to source files:

  • The deprecated file ui/core.js has been removed.
  • Files defining removed APIs have been removed. This includes: ui/form.js, ui/ie.js, ui/safe-active-element.js & ui.safe-blur.js.
  • Directories .github, build & external have been removed from the npm package

link Newer jQuery features

As part of making sure jQuery UI doesn't depend on deprecated jQuery APIs, in 1.13 we started using some newer jQuery APIs, polyfilling them in the jquery-patch.js file for older jQuery versions. In 1.14, that file is deprecated and it's no longer required for compatibility with some older supported jQuery versions. It is provided for backwards compatibility - so that apps depending on those patches continue to work after the upgrade. The file has no effect in jQuery 3.5.0 or newer.

link Improved tests on PRs

jQuery UI 1.14 is tested in all supported browsers & jQuery versions not only post-merge as was done in the past, but also on every pull request via GitHub Actions.

link Datepicker

When the datepicker UI is shown and then destroyed programmatically:

1
$( "#datepicker" ).datepicker( "destroy" );

the UI will now be hidden without the need for an explicit user action. Previously, in 1.12 the UI would not disappear immediately but only after the first mousedown. In later 1.13 versions, the UI would not disappear at all.

link Effects

The bundled jQuery Color version has been updated from v2 to v3. This changes the serialized values of color properties to include a space after each comma; e.g. rgb(127, 127, 127) instead of rgb(127,127,127). Also, transparent values now report rgba(0, 0, 0, 0) instead of transparent. This matches the standard browser serialization. It mostly affects direct usage of jQuery Color, for example:

1
2
3
4
5
6
7
8
9
// jQuery Color 2.x:
jQuery.Color( 0, 100, 200 ) + ""; // "rgb(0,100,200)"
jQuery.Color( 0, 100, 200, 0 ) + ""; // "transparent"
jQuery.Color( 0, 0, 0, 0 ) + ""; // "transparent"
// jQuery Color 3.x:
jQuery.Color( 0, 100, 200 ) + ""; // "rgb(0, 100, 200)"
jQuery.Color( 0, 100, 200, 0 ) + ""; // "rgab(0, 100, 200, 0)"
jQuery.Color( 0, 0, 0, 0 ) + ""; // "rgab(0, 0, 0, 0)"