Overview

This guide will assist in upgrading from jQuery UI 1.8.2 to jQuery UI 1.8.4. See below for a list of all changes (API, markup, css classnames) between these two versions, organized by plugin.

If you are upgrading from an older version to jQuery UI 1.8.4, see the 1.8 Upgrade Guide

Core

• Added .innerWidth( value ) to set the width, including padding.
• Added .innerHeight( value ) to set the height, including padding.
• Added .outerWidth( value, [includeMargin] ) to set the width, including padding and borders, and optionally margins.
• Added .outerHeight( value, [includeMargin] ) to set the height, including padding and borders, and optionally margins.

Widgets

Accordion

Added ability to specify multiple events

You can now pass multiple event types, space delimited, to the event option. Although there isn't really any combination of native events that make sense to use together, there are cases where using multiple custom events, or a combination of native and custom events is useful.

For example, if you're using the hover intent plugin, you can set the accordion to react to both the click event and the hoverintent event:

$( "#accordion" ).accordion({
  event: "click hoverintent"
});

Autocomplete

Added appendTo option

You can now define which element the menu is appended to. The default is to append to the body, which is the previous behavior. The appendTo option take any valid selector. If the selector matches multiple elements, the menu will be appended to the first matched item.

$( "#autocomplete" ).autocomplete({
  appendTo: "#foo"
});

Added position option

You can now define where the menu will be displayed. The default is to display the menu below the text field, with the left edges aligned. The full position API is available for use.

To have the menu display above the text field, you can do:

$( "#autocomplete" ).autocomplete({
  position: {
    my: "left bottom",
    at: "left top"
  }
});

Removed styling for .ui-autocomplete-loading class

Previously the loading class would add an animated loading gif to the background of the text field. This has been removed until ThemeRoller can support generating animated images.

You can recreate the previous styling by defining a rule for the ui-autocomplete-loading class in your stylesheet:

.ui-autocomplete-loading {
  background: #f00 url("images/loading.gif") right center no-repeat;
}

Labels are now treated as text, not HTML

If you want the old functionality back, you can use Scott González' html extension which adds a boolean html option.

Dialog

Added ability to use the position API for the position option

Passing a string or array to the position option still works, but will be removed in a future version.

If you're currently using strings for the position option, you will now need to pass an object containing two properties: my and at, each with the same string you're passing now. For example, if you're currently doing:

$( "#dialog" ).dialog({
  position: "left"
});

You should switch to:

$( "#dialog" ).dialog({
  position: {
    my: "left",
    at: "left"
  }
});

If you're currently using arrays for the position option, you will now need to pass an object telling the dialog to position itself in the top left corner, with an offset equal to what you're currently passing. For example, if you're currently doing:

$( "#dialog" ).dialog({
  position: [ 20, 100 ]
});

You should switch to:

$( "#dialog" ).dialog({
  position: {
    my: "left top",
    at: "left top",
    offset: "20 100"
});

Note that the offset is a string containing both the horizontal and vertical offset delimited by a space.

Buttons are now accessed in the proper order

Previously the default styling for buttons was to have them float right, causing them to be ordered and tabbed to in reverse order. A wrapper div has been added around the buttons and the wrapper is now floated right. This means that if you have dialogs with multiple buttons, the order will be different.

Let's assume you've created a dialog with the following options:

$( "#dialog" ).dialog({
  buttons: {
    OK: function() {},
    Cancel: function() {}
  }
});

In previous versions, this would results in the OK button being displayed on the right and the Cancel button being displayed on the left, which is the opposite from how they're ordered in the object. However, when tabbing through the dialog, the OK button would gain focus before the Cancel button.

In 1.8.4, this will result in the OK button being displayed on the left and the Cancel button being dispalyed on the right. The buttons will still be tabbed through in the same order, following the tab order users would expect based on the visual layout.

If you want your buttons to continue displaying in the same visual order as they have been, you will need to define your buttons in the reverse order from what you're currently using. So the above code would become:

$( "#dialog" ).dialog({
  buttons: {
    Cancel: function() {},
    OK: function() {}
  }
});

Tabs

Added ability to reference tabs by href

Let's assume you have a set of tabs created from the following list:

<ul>
  <li><a href="#foo">foo</a></li>
  <li><a href="#bar">bar</a></li>
  <li><a href="#baz">baz</a></li>
</ul>

You can activate the bar tab by calling the select method with an index of 1:

$( "#tabs" ).tabs( "select", 1 );

However, keeping track of the index for each tab can be difficult, especially if you've customized your tabs by making them closable or sortable. To make this easier, we've added the ability to pass the href instead of the index:

$( "#tabs" ).tabs( "select", "#bar" );

The same syntax can be used for the enable, disable, load and remove methods.