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.

One thought on “How to upgrade jQuery UI in Drupal

  1. Pingback: WYSIWYG with CKEditor in Drupal | Margots Kapacs Blog

Leave a Reply

Your email address will not be published. Required fields are marked *