Last updated March 5, 2015. Created on February 11, 2011.
Edited by jwilson3, camorim, axel.rutz, Anonymous (not verified). Log in to edit this page.

You will often need a newer version of jQuery to use a certain jQuery plugin. There are several ways to achieve this.

Note that the JavaScript in Drupal core depends on the specific version of jQuery that is packaged with core. Drag and drop, table sorting, and other features may not work with higher versions of jQuery unless you adapt the code of those core .js files. If you only need a higher version of jQuery for a certain plugin, specify that it should only be swapped for the frontend of your site or for the specific page it is needed.

jQuery update

jQuery update takes care of the changes needed in core javascript code so it stays compatible also in the backend. This is the simplest way and other methods should only be used if you have problems with it.

Method 1: Using hook_js_alter

In Drupal 7 you can use hook_js_alter for replacing jQuery conditionally. This way you don't need to load jQuery twice which is better for performance and you also don't need to adapt your code. You can easily wrap some conditions around so it only targets the front-end pages where you need an updated version of jQuery and avoid breaking the backend js.

<?php
function hook_js_alter(&$javascript) {
 
// Swap out jQuery to use an updated version of the library.
 
$javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'jquery_update') . '/jquery.js';
}
?>

In Drupal 6 you can use JS Alter, which has a similar hook.

Method 2: Running 2 versions of jQuery side-by-side - the jQuery noConflict() function.

jQuery Multi module

Note: The jQuery Multi module has built an interface around this method.

The Problem

Your custom theme, dropdown menu, slideshow, or other jQuery-dependent scripts require jQuery 1.4, jQuery UI 1.8, or some other jQuery version or component. Drupal 6 ships with jQuery 1.2.6. You could just replace the jquery.js file in example.com/misc with a newer version, but you'd run into some issues, such as:

  • Useful UI features like draggable tables and ajax search will stop working
  • Contributed modules that use jQuery assume you are using 1.2.6
  • After updating Drupal to a newer version, your custom jquery.js file would be overwritten with 1.2.6

The Solution

jQuery already has the functionality to run along side a different version of jQuery (or, really, along side any other JavaScript library that uses the $ symbol as a function or variable). This is the noConflict() function. You can view the API page here: http://api.jquery.com/jQuery.noConflict/

To use this functionality within your project, simply tell the browser about your new jQuery library and that you'll be referencing it via your custom noConflict identifier:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  var $jq = jQuery.noConflict();
</script>

Example: my-theme/page.tpl.php

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    var $jq = jQuery.noConflict();
  </script>
  <?php print $scripts; ?>
</head>

With this method jQuery 1.2.6 is loading with every page, and can be used by Views, Draggable.js, any contributed Ajax calls, etc. Also, jQuery 1.4.4 (as in this example) is also loading and the 2 are not interfering with each other. Another point worth adding is that 1.4.4 is being loaded from the Google CDN - one less file for your audience to download from your server.

Using noConflict in your scripts

To execute scripts with the new version of jQuery you simply need to use $jq instead of $ in your scripts, for example:

$jq(document).ready(function(){
  $jq('#my-div').function();
});

More information about this method: http://www.drupal.org/node/578712

Using noConflict in contributed scripts

You can easily modify an external script to use your custom noConflict identifier. For example, the Qtip library depends on jQuery 1.5. You could include it via the above methods and then alter jquery.qtip.js, replacing the first line

(function($, window, undefined) {

with

(function($jq, window, undefined) {

Method 3: Using jquery_update module

Unfortunately as long as the patch in #426764: Allow other modules to alter the replacements has not landed for Drupal 6 you need to hack the jquery_update module as described in #1184704: Load different jQuery version on specified page..

Example: Install jquery-1.7.1.js in /jquery_update/replace and hack the last bit of code of the jquery_update.module as follows

<?php
/**
 * Return the path to the jQuery file.
 */
function jquery_update_jquery_path() {
  if (
arg(0) =='admin' || arg(1) == 'add' || arg(2) == 'edit' || arg(0) == 'panels' || arg(0) == 'ctools') {
   
$jquery_file = array('none' => 'jquery.js', 'min' => 'jquery.min.js');
    return
JQUERY_UPDATE_REPLACE_PATH . '/' . $jquery_file[variable_get('jquery_update_compression_type', 'min')];
  }
  else {
   
$jquery_file = array('none' => 'jquery-1.7.1.js', 'min' => 'jquery-1.7.1.min.js');
    return
JQUERY_UPDATE_REPLACE_PATH . '/' . $jquery_file[variable_get('jquery_update_compression_type', 'min')];
  }
}
?>

Method 4: Swapping jQuery with preprocess page

This method has the advantage that it is specific for your theme, so if you use a different backend theme for the administration of your site, you normally should not have any problems with core js files not working anymore.

<?php
function yourModuleOrThemeName_preprocess_page(&$variables) {
 
// exclude backend pages to avoid core js not working anymore
  // you could also just use a backend theme to avoid this
 
if (arg(0) != 'admin' || !(arg(1) == 'add' && arg(2) == 'edit') || arg(0) != 'panels' || arg(0) != 'ctools') {
   
$scripts = drupal_add_js();
   
$new_jquery = array(drupal_get_path('theme', 'YOURTHEME') . '/js/jquery-1.7.1.min.js' => $scripts['core']['misc/jquery.js']);
   
$scripts['core'] = array_merge($new_jquery, $scripts['core']);
    unset(
$scripts['core']['misc/jquery.js']);
   
$variables['scripts'] = drupal_get_js('header', $scripts);
  }
}
?>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

brekele’s picture

Gee man.. I've been trying to solve this issue for the past three hours...
Thanks a lot dude! You save my day :)

+1
Like
Up!

csdco’s picture

Very glad this helps.

If anyone sees errors, please point them out and I will revise.

jdln’s picture

Subscribing.

Valeratal’s picture

subscribing

claar’s picture

 

abemonkey’s picture

I'm trying to use this with the qtip2 jquery plugin without any luck. Should this be able to work with plugins?

csdco’s picture

When using additional plugins like qTip or anything that depends on a different version of jQuery from Drupal core (1.2), you need to alter their script to use the same kind of identifier, i.e. in jquery.qtip.js, replace the first line

(function($, window, undefined) {

with

(function($jq, window, undefined) {

*Edit: I have added this information to the main page above.

WillHall’s picture

Why are you adding a new alias to the namespace if one already exists for this purpose? You can always use jQuery to identify a script that should be executed by jQuery.

jQuery(function() {
jQuery()....
}):

or...

jQuery(function($) {
$()....
}):

or...

(function($) {
$()...
})(jQuery)

Also, you should never have to modify plugins in order to utilize a different object alias, if you find yourself doing this you are doing something wrong.

If you do find yourself needing to create a new alias you should do it the right way.

var j = jQuery.noConflict();

Here is more information on using jQuery with other libraries.
http://api.jquery.com/jQuery.noConflict/

---------
My Blog | Void Menu | Tweetpack

csdco’s picture

Thanks for posting this information.

It was my experience and understanding that to call jQuery(function()) would be using the jQuery found in Drupal core and that adding a new version and subsequently calling ths noConflict() would allow you to use the 2 versions side by side. Is this not the case?

WillHall’s picture

You should not really need to or be loading two versions of the same library. jquery_update allows you to update the version of jQuery used by the drupal core to a newer version if you really just need to upgrade jquery.

The namespace alias jQuery is reserved by jQuery not drupal.

---------
My Blog | Void Menu | Tweetpack

csdco’s picture

I recommend you read the entire book page above for some use cases. A lot of times themers or module developers will want to use jQuery 1.4 to leverage some of the newer functions that were introduced in that major version. Simply using jQuery update can get you to 1.3.2, but versions beyond that require applying patches to both jQuery Update as well as other core JS includes, such as tabledrag.js. If you do this, you've just lost your ability to easily upgrade Drupal core and more importantly you're mucking around with all 6.x contributed modules that are depending on jQuery 1.2 syntax.

I have used the above method on several sites to use jQuery 1.4+ functionality without interfering with Drupal's core JQ functionality.

husumiao’s picture

Thank you so much, man.
I taked a lot of time to solve the version problem for JQ a month ago, but i didn't success. Finally, i give up use the high version JQ and use other ways to finished my work.
So i meet same problem right now, perfect solutions.
Why i haven't view this posts before? hahaha.....

Have a good day.

pferlito’s picture

Very helpful and well written. It works!

Ferlito/van der Wyk | Drupal web design & development

drupalfever’s picture

It has been a struggle to deal with the limitations of jquery 1.2 in Drupal 6. I was already in the process of patching Drupal 6 Core and patching the jquery_update module to allow me to install the newest version of jquery. At the time of this posting, the newest stable version of jquery is 1.6.2. I was relieved to find your post still in time!

Your solution is elegant, quick, and worry free. I love it! I already knew about the noConflict option in jquery but I didn't realize that I could use it with other versions of jquery itself. Very clever!

I would like to thank you, also, for the smart suggestion of using Google as a jquery library repository. By the way, the URL for the newest jquery library in Google is as follows:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

This is the site I crash often: http://www.drupalfever.com

csdco’s picture

Your enthusiasm is much appreciated. I have used this method on many websites to quickly and easily insert things like Fancybox, Nivo Slider, etc., without having to worry about installing modules, updating core's jQuery, etc.

I want to point out that I read a post somewhere on a Drupal.org a while ago where a user said it was "additional overhead" to have Google stream a new copy of jQuery to the user and that the less expensive option was to just use jQuery update to serve up 1 library. Someone responded to the comment saying that installing the jQuery update module already streams an additional download, adds to the php memory footprint, and make additional database calls on every page load. That comment helped me re-think how I want to modify my Drupal websites -- any time I can include a snippet of code into template.php or something similar, I'm much better off than installing a dozen tiny modules that do the same things and require database calls.

Now, that's not at all a dig on the jQuery update module. I wrote a d7permissions module that's here on d.o which depends on jQuery 1.3+ and the only way I felt comfortable releasing it publicly was if it had a dependency on jQuery update. It's a great module for those that aren't comfortable adding in some of this code or need another contrib module that requires a stable dependency.

jeremiahtre.in’s picture

csdco,

Thank you, first off.

I would love to know how you used this method for Nivo Slider. I found myself replacing every '$' with '$jq' inside the 'views_nivo_slider.js' script. This did not seem to work for me. I believe I was going about this wrong.

I understand the jQuery Update module could carry me to 1.3.2, providing Nivo Slider the right version, but I can't get it to work right. It seems the jQuery Update module has "updated" me to 1.3.2, per the status report. However, an aggregate script is still including core's 1.2.6 version. Have you had to work around this in Drupal 6.x?

Kindest,

jtreinau

geraud’s picture

First, I want to thank you for this great tip, it works great for me.

I just have a question about external scripts that I want to be run with the latest version of jQuery.
You mentioned the qtip example at the end your post:

replacing
(function($, window, undefined) {
by
(function($jq, window, undefined) {

But any time I look at the code of external scripts, I have different configs:
Things like:
(function(d,C){function M() ... })(jQuery);
No $ sign to be replaced by $jq

What should I do ?

csdco’s picture

I'm not an expert on jQuery by any means, so anyone can correct this as needed.

I think you can replace the (jQuery) at the end of the script with ($jq), as that defines how you're calling your function.

lucabarbetti’s picture

Great idea csdco and I'd like to try it with Drupal 6.22 and Colorbox module, since I'm not a programmer I have a couple of questions for you:
Do I have to replace all the $ symbols in the .js file with $jq or just replacing (jQuery) with ($jq) at the end is enough?
The colorbox module comes with 7 .js files should I do the same thing for all of them?
Thanks a lot!

lucabarbetti’s picture

I can't enable Colorbox following the steps explained in this doc. Maybe I didn't do it the right way... anyway, here is what i did:
I edited the file 'my-theme/page.tpl.php' as suggested, then I edited all Colorbox .js files changing (jQuery) with (j$q) and I tried to anable the Colorbox module. I couldn't enable the colorbox module because it says that it 'Depends on: Jquery_update (missing)'.
What should I do?
Thanks for your help.

csdco’s picture

If you're going to use the Colorbox Drupal module then you need jQuery Update (http://drupal.org/project/jquery_update), a dependency which is listed on the Colorbox module's page.

The instructions on this page are for using a JavaScript library / plugin / script (such as Colorbox) independently of any Drupal module that may also support that plugin. In other words, use the Colorbox AND jQuery Update modules OR don't use either module, grab Colorbox from http://jacklmoore.com/colorbox/ and use noconflict() along with your own version of jQuery. If you only care about Colorbox, you may just be better off using the 2 modules mentioned above.

lucabarbetti’s picture

Hi csdco,
I like Colorbox but I've opted for the Lightbox2 module because, unfortunately, the jQuery Update module has issues with other modules that I use.
Thanks a lot for your reply, I really appreciated it because as a newbie this Drupal world seems like a jungle.
Take care

csdco’s picture

I really like Fancybox because it intelligently moves DOM elements instead of duplicating them (as some overlay libraries do) which can become problematic. It also supports pretty much anything you can throw at it, such as an img, div, iframe, etc. You should be able to get Fancybox running with its Drupal module and jQuery Update, no other custom stuff like is on this page.

lucabarbetti’s picture

I checked Fancybox out and I like it but I don't want to use the jQuery Update, at least not right now, maybe in the future when I have a better understanding of Drupal, its modules and their interactions and issues. After all, what I need in my website is a multilingual gallery with a decent slideshow for few pictures, maybe 30 total... Actually, they might be 6x(30) because I haven't found yet a way to have six galleries (one for each language) that use all the same 30 pictures, given that my pictures have no text that has to be translated.
Thanks again csdco, have a good day!!!!

csdco’s picture

At this point, Drupal 7 is mature enough and so many modules have been ported to it that I would recommend going with D7 for a new site or project like you describe. It ships with jQuery 1.4 which I have found to be adequate for any library (such as Fancybox or Lightbox) that you can throw at it. It also has the noconflict() stuff already in place so this kind of thing won't be a problem going forward.

I wrote a blog article on creating a D7 image gallery without using modules (http://www.csdesignco.com/content/make-drupal-image-gallery-without-usin...) which you may find interesting; this mentality paired with a simple jQuery cycle plugin could give you an image gallery that is limitless and requires very little horsepower to run.

lucabarbetti’s picture

Oh boy, if only I could talk to you about my Drupal (dis)Adventures! Unfortunately we would go way off the subject of your initial document and I don't want to ruin it because it is a very interesting and useful document.
Briefly, I tried D7 before D6 because, following all the documents and reviews I had read, it seemed to have all the multilingual capabilities that I needed right out of the box. Although I read tons of docs on building multilingual websites with D7, I couldn't find a way to make a multilevel multilingual main menu (in secondary languages menus the child items couldn't be 'linked' the corresponding parent item). I even asked gurus of the internationalization/localization area but I got no info, no help, no hints, nothing, therefore I dropped D7 in favor of D6. And here I am, multilingual menus are working (even though not exactly I desired) but now I'm stuck with a gallery that can't become multilingual easily wihtout replicating the pictures. I'm pretty sure that it can be done but it shouldn't be so complicated for a CMS said to have strong multilingual capabilities.
I'm gonna check your article... right now!
Thank you so much, csdco, have a good day!

Paracetamol’s picture

I also need to use colorbox + jquery_update module together on most parts of my site but sadly also a layout library on a subtheme which requires an even newer version of jquery.
So my approach was to use method 4 and replace the script via the template override of my subtheme, which works as planned – except not while using colorbox + forced jquery_update on the rest of the site.

  • Is there a way to override the core script list but the jquery_update replacement via a template.php hook? EDIT: Ok, I guess you'd need a custom module to override it.

I know in Drupal 7 I could override a different jquery.min.js in my theme.info – sadly, that's not an option for D6.

Thanks for any info on this!

EDIT: I tried changing the paths in method 4 to those applied by jquery update, but that didn't work. Or should it work?
EDIT: Ok, actually method 4 didn't work at all, because the variable name $vars was used instead of the one passed by the function. But still no success while turning on jquery_update.

MRX’s picture

Maybe this can help you to override the core script list in drupal 6:

template.php file

<?php
function phptemplate_preprocess_page(&$vars) {
 
$javascript = drupal_add_js();
 
$javascript['core'] = array('path/to/your/jquery.js' => $javascript['core']['misc/jquery.js'], 'misc/drupal.js' => $javascript['core']['misc/drupal.js']);
 
$vars['scripts'] = drupal_get_js('header',$javascript);
}
?>
end0rama’s picture

Thanks for the works, it really helped!

Also I found out a really handful thing: if you load you libraries between newer jquery version and jQuery.noConflict() seems that there is no need to change $ association in plugins!

Also passing true to noConflict could help ( see http://api.jquery.com/jQuery.noConflict/#example-4 and in particular the Result section ).

I used it and seem to work properly:

<script type="text/javascript" src="<?php print $base_path . $directory; ?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php print $base_path . $directory ?>/js/jquery.tipTip.min.js"></script>
<script type="text/javascript">
  var $j = jQuery.noConflict(true);
</script>
<script type="text/javascript">
  $j(document).ready(function() {
    $j("a", "ul.menu").tipTip();
  });
</script>

Edit:
Futhermore you can alias the jQuery object in the closure, so that you can normally use $ inside it ( found it in jquery docs ):

<script type="text/javascript">
  $j(document).ready(function($) {
    $("a", "ul.menu").tipTip();
  });
</script>
undersound3’s picture

Big thanks for writing this down!

Worked out of the box with slidesjs 1.19 and jquery 1.5.2

inri13666’s picture

goron’s picture

I've just released a module, for D6 and D7, which allows you to load another version of jQuery in parallel, as described on this page. It also lets you target individual libraries and files to be loaded with the new jQuery version. Try it out!

jQuery Multi

(I just saw that there's another comment here about a new module. I'm not sure what exactly it does, and it doesn't seem to exist on d.o...)

psegarel’s picture

Dropped Jquery Update, using jQuery Multi instead!
It's a very clean solution.
JQuery Multi solves all the problems I had with Views UI breaking with JQuery Update.
Now, a great addition would be the ability to load jQuery from a CDN, similar to what was introduced in JQuery Update 7.x-2.x-dev

garbo’s picture

I just wanted to thank csdco for posting this solution. It rocks and I can do away with the jQuery_update module now!

I use this solution to implement the galleria slideshow (http://galleria.io/) to my D6.X site.

tentonjim’s picture

Thank you SO MUCH for posting this, I was really having a rough go of it with some of the public facing jQuery plugins wanting newer versions but Drupal's backend requiring jQuery 1.2.6 - THANK YOU!

Question though - I am using Drupal 6.25 with Calendar 6x-2.4 - the Ajax paging for the calendar works within Admin when you "Preview" the View... but I cannot get it to work on the public side to save my life. This was happening before this jQuery Update issue.

Thanks!
Jim

-
Jim Summer
SEO Resume
Seattle, WA
@SEO_Web_Design

batnix’s picture

Hi folks,

somehow I'm getting an php warning when I modify my template.php with accordance to "Method 4: Swapping jquery with preprocess page". There are two issues that are from my point of view inexplicable. Well, lets meet the minor one first :).

I've added the particular lines in my template.php (needless to say that I've also downloaded the newest version of jquery and placed it in a folder on my web server). Well, for purposes of completeness I submit the lines as well:

<?php
if (arg(0) != 'admin' || !(arg(1) == 'add' && arg(2) == 'edit') || arg(0) != 'panels' || arg(0) != 'ctools') {
  
$scripts = drupal_add_js();
  
$new_jquery = array('test/js/jquery-1.7.2.min.js' => $scripts['core']['misc/jquery.js']);
   
$scripts['core'] = array_merge($new_jquery, $scripts['core']);
    unset(
$scripts['core']['misc/jquery.js']);

   
$variables['scripts'] = drupal_get_js('header', $scripts);
  }
?>

With this in place I'm getting the following php warning:

Warning: array_merge(): Argument #2 is not an array in twitter_bootstrap_preprocess_page() (line 187 of /var/www/vhosts/XXXX/XXXX/sites/all/themes/test/template.php).

Since I'm not a php developer and I don't know how to debug my template.php appropriately I'd be very grateful for any help or comments regarding this error.

Apart from that... I'm getting this error regardless of whether I'm checking an [MYDOMAIN]/admin link or not. According to the if condition I expect an error when I request e.g. [MYDOMAIN]/node but requesting [MYDOMAIN]/admin should't araise anything. This is also somehow ridiculous since the if conditions shouldn't allow the php parser to jumb into the if-body, should he?

Thanks for any help!

Best wishes from Germany :)...
Adam L.

chrisroane’s picture

I think version #4 may not have been updated with newer versions of D7. So I set out how to get this to work in the theme layer. This is what I came up with. This assumes you are using a different theme for the admin area.

Put this into your template.php file:

/**
* This will replace the default version of jquery with a newer version.
*/
function THEMENAME_js_alter(&$js) {
  $theme_path = drupal_get_path('theme', variable_get('theme_default', NULL));
  $new_jquery = $theme_path . '/js/jquery-1.8.0.min.js';

  // Copy the current jQuery file settings and change
  $js[$new_jquery] = $js['misc/jquery.js'];

  // Update necessary settings
  $js[$new_jquery]['version'] = 1.8;
  $js[$new_jquery]['data'] = $new_jquery;

  // Finally remove the original jQuery
  unset($js['misc/jquery.js']);
}

I came across this from this page: http://drupal.stackexchange.com/questions/28820/how-do-i-update-jquery-t...

I got this to work great from my end.

garbo’s picture

I updated the code in the above comment to ensure the newer version of jquery is only loaded on the frontend. This prevents compatibility issues with javascripts on the backend.

<?php
function YOURTHEME_js_alter(&$js) {
 
// exclude backend pages to avoid core js not working anymore
  // you could also just use a backend theme to avoid this
 
if (arg(0) != 'admin' || !(arg(1) == 'add' && arg(2) == 'edit') || arg(0) != 'panels' || arg(0) != 'ctools') {
   
$theme_path = drupal_get_path('theme', 'YOURTHEME');
   
$new_jquery = $theme_path . '/js/jquery-1.7.2.min.js';
 
   
// Copy the current jQuery file settings and change
   
$js[$new_jquery] = $js['misc/jquery.js'];
 
   
// Update necessary settings
   
$js[$new_jquery]['version'] = 1.8;
   
$js[$new_jquery]['data'] = $new_jquery;
 
   
// Finally remove the original jQuery
   
unset($js['misc/jquery.js']);
  }
}
?>
natedillon’s picture

This doesn't seem to work with the admin overlay screens. Every method I have tried to update to jQuery 1.9.0 has caused the top of the admin overlay to be cut off.

garbo’s picture

Are you using a different theme for the backend as for the frontend?

The overlay pages are loaded in an iFrame so they don't take over the of the frontend.

mattf10’s picture

For D7, you must use hook_js_alter, like so:

function MYMODULE_js_alter(&$js) {
  $path = drupal_get_path('module', 'MYMODULE') . '/path/to/jquery.1.7.js';

  // Copy the current jQuery file settings and change
  $js[$path] = $js['misc/jquery.js'];

  // Update necessary settings
  $js[$path]['version'] = 1.7;
  $js[$path]['data'] = $path;

  // Finally remove the original jQuery
  unset($js['misc/jquery.js']);
}

Hat Tip: http://drupal.stackexchange.com/questions/28820/how-do-i-update-jquery-to-the-latest-version-i-can-download

csdco’s picture

Just keep in mind that replacing Drupal's jQuery with 1.7 will probably break some core / contrib javascript functionality.

gagarine’s picture

I write a blog post about it http://antistatique.net/blog/2013/01/04/drupal-use-a-different-jquerys-v... . Basically i use this code in a custom module:

<?php
/**
 * Implements hook_module_implements_alter().
 */
function mymodule_site_module_implements_alter(&$implementations, $hook) {
  if (
$hook == 'library_alter') {
    if(isset(
$implementations['jquery_update'])) {
     
// Move jquery update to the end. This will make sure our hook_library_alter
      // is always called before the jquery_update.
     
$jquery_update = $implementations['jquery_update'];
      unset(
$implementations['jquery_update']);
     
$implementations['jquery_update'] = $jquery_update;
    }
  }
}

/**
 * Implements hook_library_alter().
 */
function mymodule_site_library_alter(&$libraries, $module) {
 
// If it is the admin theme all we want to do is change the global $conf
  // variable so when jquery_update runs right after us it will use 1.5.
  // We are not using path_is_admin(current_path()) because some admin path can use
  // the frontend theme like node edit page
 
global $theme_key;
  if (
variable_get('admin_theme') == $theme_key) {
   
// Modifying global $conf variable, can be dangerous. Be carefull.
   
global $conf;
   
$conf['jquery_update_jquery_version'] = '1.5';
  }
}
?>
qwertmax’s picture

will it work with the enabled cache? (preprocess and hook_js and etc)
Because if you open your have with new jQuery version and make clear cache you will have new version on your .js cached file.
Bud if you open page with old js page and try to clear cache you will generate js cached file with old jquery version.
So I think this works only for sites where cache is disable.

gagarine’s picture

it shoulds work as cache name has a unique hash and is made for each page . drupal_build_js_cache

Stephanie_42’s picture

+1
Subscribing

gohlkus’s picture

I am maintaining a D6 site that someone else developed. I tried to install Fancybox but it (predictably) broke a bunch of other stuff so I got rid of it and jQuery update. This discussion gives me a couple options for when I try again. Thanks!

hooface’s picture

Anonymous’s picture

"jQuery update takes care of the changes needed in core javascript code so it stays compatible also in the backend. This is the simplest way and other methods should only be used if you have problems with it."

This might have been true when this article got written, but for me Jquery update did not stop the backend - views! - from crashing and failing. In fact, it only made matters worse with certain modules.

And, since - like many - I am not a wizzkid when it comes to editing php, I decided to stick with Jquery 1.5, so if any contributed module demands a higher version, I simply don´t use that module.

Took me three bloody days to figure it out.
And there I was, thinking that switching from Joomla to Drupal would make my life easier.

Considering that Jquery is already at version 2, for me it is a fine example of how every system is as strong as its weakest component - which is not necessarily a technical component, but might very well be a lack of proper documentation and/or coordination.

frobinrobin’s picture

I've seen comments/examples for completely "replacing" jQuery in hook_js_alter.. but replacing it throws some JS errors, I really need jQuery 1.9.0 for a specific feature and don't want to be messing around in the page template.
So how to get 1.9.0 in noConflict mode via hook_js_alter? simple:

<?php
/**
 * Implements hook_js_alter().
 *
 * Includes jquery 1.9.0 as NoConflict
 * @param type $javascript
 */
function MYMODULENAME_js_alter(&$javascript) {
 
// I only want to alter for certain pages
 
if (arg(0) !== 'some-site-area-i-want') {
    return;
  }
 
$replace = array();
 
// Keep the original safe
 
$store = $javascript;
 
// Shift settings to our replacement array.
 
$replace['settings'] = array_shift($store);
 
// Choose  jquery version and JS identifier
 
$ver = '1.9.0';
 
$jsid = 'jq';
 
// Serve jquery  from local file
 
$path = drupal_get_path('module', 'custom_rankings') . '/js/' . $ver . '/jquery.min.js';
 
// Serve jquery via CDN.. works but we'll stick with local for now, must also change type to 'external'
  //$path = '//ajax.googleapis.com/ajax/libs/jquery/' . $ver . '/jquery.min.js';
 
$replace[$path] = array(
   
'group' => -101, // the lowest group I could see was 100
   
'weight' => -20, // weight the file lower than the inline
   
'data' => $path, // path from above
   
'scope' => 'header',
   
'version' => $ver,
   
'type' => 'file',
   
'preprocess' => TRUE,
   
'cache' => TRUE,
   
'defer' => FALSE,
  );
 
// now the no conflict snippet
 
$replace[] = array(
   
'group' => -101,
   
'weight' => -19,
   
'data' => 'var $'.$jsid.' = jQuery.noConflict();',
   
'scope' => 'header',
   
'type' => 'inline',
   
'cache' => TRUE,
   
'preprocess' => TRUE,
   
'version' => NULL,
  );
 
// now join together and replace $javascript
 
$javascript = $replace + $store;
}
?>

Voila! A simple noConflict from within a module for a certain path only!

goron’s picture

Sounds like you should try the jQuery Multi module

gottaknow’s picture

I have place the following solution from above in my template file.
if (arg(0) != 'admin' || !(arg(1) == 'add' && arg(2) == 'edit') || arg(0) != 'panels' || arg(0) != 'ctools') {
$scripts = drupal_add_js();
$new_jquery = array(drupal_get_path('theme', 'xx') . '/js/jquery.js' => $scripts['core']['misc/jquery.js']);
$scripts['core'] = array_merge($new_jquery, $scripts['core']);
unset($scripts['core']['misc/jquery.js']);
$variables['scripts'] = drupal_get_js('header', $scripts);
}
I get this error when I try inserting the script.
line 122 starts $new_jquery
Notice: Undefined index: core in xx_preprocess_page() (line 122 of /template.php).
Notice: Undefined index: core in xx_preprocess_page() (line 123 of //template.php).
Warning: array_merge() [function.array-merge]: Argument #2 is not an array in xxx_preprocess_page() (line 123 of /template.php).

I am using a theme I created based on bootstrap and call jquery from the bootstrap.js file, I have tried removing that and put the call in my theme.info file. But still I can't get jquery to fire.
// @codekit-prepend "jquery.js"
Not sure where the problem lies so trying all sorts.

This is the tiny script I'm trying to fire but I'm having no luck.

$('.btn-primary').each( function() {
alert("This should work.");
});

I have Drupal 7 with jQuery update module and I'm not sure of any other detail I should include. I notice everyone has commented that the suggestions work do they all work? Why am I having difficulty? Suggestions?
Much appreciated.

drecute’s picture

Sun Certified Professional
http://sinati.com