How to upgrade jQuery UI in Drupal

In this post, we cover how to upgrade jQuery UI lib for Drupal. The jquery_update module provides ability to switch the JQuery newest version but not JQuery UI, so we do it manually

1. Load jQuery and set version

Enable jquery_update module, so the jquery is loaded

2. Load Newest UI libs

Important to note, that the jquery_update module contains the newest version of JQuery UI but is not loading at least at the time of writing this article. So, We use hook_js_alter() to swap jquery UI libs to newer version as following

function MODULE-NAME_js_alter(&$javascript){
if($jQuery_ver = variable_get('jquery_update_jquery_version', '1.8') === '1.10'){
        //use jquery_updates ui libraries instead the drupal core
        foreach($javascript as $key => $js_path){
            $token_path = explode("/", $key);
            $current_js_lib = $token_path[count($token_path) - 1];
            $new_path = drupal_get_path('module','jquery_update').'/replace/ui/ui/minified/'.$current_js_lib;

            if($token_path[0] === 'misc' && $token_path[1] === 'ui'){
                //avoid duplicates
                if(!array_key_exists($new_path,$js_path)){
                    $data = $javascript[$key];
                    $data['version'] = "1.10.2";
                    $data['data'] = $new_path;
                    unset($javascript[$key]);
                    $javascript[$new_path] = $data;
                }

            }
        }
    }
}

Here, it takes all js being included from ‘misc/ui folder and replace their path to the current version of jQuery ui libs

2.B CSS styles seem to be handled by jQuery_update module so nothing to do here
3. Include Legacy Support

There is JQuery Lib – jquery-migrate.js available to provide legacy support for JQuery that many of Drupal core modules use, so we include it also via hook_js_alter() as following:

    function MODULE-NAME_js_alter(&$javascript){
      ...
      $migrate_js = '';
    if ($jQuery_ver = variable_get('jquery_update_jquery_version', '1.08') > '1.07') {
        //use jquery_updates ui libraries instead the drupal core
        foreach ($javascript as $key => $js_path) {
            $token_path = explode("/", $key);
            $current_js_lib = $token_path[count($token_path) - 1];

            //add legacy support for other modules still using jQuery legacy library
            if ($current_js_lib == 'jquery.min.js' || $current_js_lib == 'jquery.js') {
                $new_path = 'http://code.jquery.com/jquery-migrate-1.2.1.min.js';
                $migrate_js = $js_path;
                $migrate_js['version'] = "1.2.1";
                $migrate_js['data'] = $new_path;
                $migrate_js['weight'] = $js_path['weight'] + 0.01;
                $migrate_js['type'] = 'external';
                $javascript[$new_path] = $migrate_js;
            }
        }
    }
}

In the if statement, the jquery-migrate.min.js is imported right after the jquery library. The jquery-migrate.min.js lib adds all the legacy support for modules still using jQuery old version. To ensure it comes right after, we take the weight of the Jquery lib and decrement.