Upgrading to jQuery.UI.Combined 1.11.0

The jQueryUI team released a new version of their library recently. This release has some changes which will impact your apps as you migrate to 1.11.0. This post will highlight the changes you need to do to use jQuery.UI.Combined NuGet package.

Changes

I am going to highlight the change that is relevant to this post. For a full list of changes/ release notes see the changelog and upgrade guide on the jQueryUI team site.

The jQuery.UI.Combined NuGet package combines the jQueryUI controls and a base theme. In 1.11.0, the jQuery UI team has renamed the files in the base theme. The change was to drop “jquery.ui” from all the CSS and Javascript filenames. This change was done to add AMD support.

The minified files for the base theme have been removed as well.

Migrating apps

If you have an app that is linking to these file names then you will have to update the link references to pull in the correct file names.
If you are using ASP.NET Web Optimizationfeature, then you would have to update your BundleConfig to add the updated filenames. Web Optimization was used in the ASP.NET Web Forms, MVC, Web API and SPA templates that were shipped with Visual Studio 2012 and 2013.
- The following code shows the updated BundleConfig. If you are using the ASP.NET MVC or Web API templates from VS 2012/ 2013, then you can find this file in App_Start folder of your site.

Code Snippet

bundles.Add(newStyleBundle(“~/Content/themes/base/css”).Include(
            “~/Content/themes/base/core.css”,
            “~/Content/themes/base/resizable.css”,
            “~/Content/themes/base/selectable.css”,
            “~/Content/themes/base/accordion.css”,
            “~/Content/themes/base/autocomplete.css”,
            “~/Content/themes/base/button.css”,
            “~/Content/themes/base/dialog.css”,
            “~/Content/themes/base/slider.css”,
            “~/Content/themes/base/tabs.css”,
            “~/Content/themes/base/datepicker.css”,
            “~/Content/themes/base/progressbar.css”,
            “~/Content/themes/base/theme.css”));

The following code shows the updated Bundle.config. If you are using the ASP.NET Web Forms templates from VS 2012/ 2013, then you can find this file in root of your application.

Code Snippet

<styleBundlepath=“~/Content/themes/base/css“>
  <includepath=“~/Content/themes/base/core.css“ />
  <includepath=“~/Content/themes/base/resizable.css“ />
  <includepath=“~/Content/themes/base/selectable.css“ />
  <includepath=“~/Content/themes/base/accordion.css“ />
  <includepath=“~/Content/themes/base/autocomplete.css“ />
  <includepath=“~/Content/themes/base/button.css“ />
  <includepath=“~/Content/themes/base/dialog.css“ />
  <includepath=“~/Content/themes/base/slider.css“ />
  <includepath=“~/Content/themes/base/tabs.css“ />
  <includepath=“~/Content/themes/base/datepicker.css“ />
  <includepath=“~/Content/themes/base/progressbar.css“ />
  <includepath=“~/Content/themes/base/theme.css“ />
</styleBundle>