A few months ago, i tried to add the latest jQuery to a Drupal 6 website. If you are still working on Drupal 6. Please refer to Drupal – Add Extra jQuery Library.
The approach we used in the above post does not work in Drupal 7 since drupal_set_html_head() has been renamed to drupal_add_html_head() and inline Javascript is no longer supported in this new version. So today i would like to show you another solution which works in Drupal 7.
The most straight forward way to add the jQuery is to edit the html.tpl.php directly. To avoid conflict with the jQuery provided by Drupal, we need to add it new one before Drupal one. Here is the html.tpl.php of Omega theme.
html.tpl.php
<?php print $doctype; ?>
<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?>>
<head<?php print $rdf->profile; ?>>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<!-- *** Extra jQuery - START *** -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<!-- *** Extra jQuery - END *** -->
<!-- *** Other JS libs - START *** -->
<!--
Add other jQuery libs which you want to use with the above latest jQuery.
-->
<!-- *** Other JS libs - END *** -->
<!-- Default drupal js files -->
<?php print $scripts; ?>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body<?php print $attributes;?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
Check if it works in Chrome.
I found that for those 3rd party Javascript libs which are included in the <theme>.info, they cannot be used with the latest jQuery. The workaround is to include those libs right after the latest jQuery include statement as shown in the html.tpl.php.
And for the custom Javascript files which are included in the <theme>.info. You can use both jQuery as shown below.
// Use latest jQuery
$j(function($){
$(document).ready(function(){
alert($().jquery);
});
});
// Use Drupal jQuery
(function($){
$(document).ready(function(){
alert($().jquery);
});
})(jQuery);
Done =)
Eureka! 