There are a lot of forum posts and issue queues revolving around the need to use a newer version of jQuery on a Drupal 6.x site. There are several ways to achieve this, such as using the jQuery Update module, but I'm going to focus on the recommended method of running 2 versions of jQuery side-by-side - the jQuery noConflict() function.
The Problem
Your custom theme, dropdown menu, slideshow, or other jQuery dependant 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="http://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="http://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();
});
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) {
Reference:
http://drupal.org/node/1058168
Friday, September 9, 2011
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment