Introduction #

If you are using Liferay 6 (or later), the portal uses Alloy UI instead of jQuery, which means that you can use whatever version of jQuery you need for your custom developments.

If you are using Liferay 5.2.x, you may have noticed that Liferay uses jQuery 1.2.6. Upgrading liferay to use a new library may be hard. New versions of jQuery are not backwards compatible and several features (such as drag and drop) may break.

However, a nice solution is to keep liferay using jQuery 1.2.6 and make your custom portlets or themes use a newer version if needed.

Method #

The file in liferay which loads all the javascript files is html/common/theme/top_head.jsp. You can overwrite this file using a hook or the ext environment to match your needs.

The next snippets are not the exact code that should be pasted but several solutions that allow to have several jQuery versions in the same page:

Example #

You may need to remove the jquery version of liferay from this property in your portal-ext.properties: javascript.barebone.files=. You can see when these files are loaded in top_head.jsp. If we remove it from here, we will need to load it manually afterwards.

The following code would keep liferay with 1.2.6 (as it is the last loaded library), and would keep the newer version under the variable $jq instead of $ or jQuery. You could use jq in your portlets or themes refering to the newer library.

<script type='text/javascript' src='js/jquery_1.4.js'></script>  
<script type='text/javascript'>  
  
 var $jq = jQuery.noConflict(true);  
  
</script>  
  
<script type='text/javascript' src='js/jquery_1.2.6.js'></script>

$jq('.classname').hide() -- uses jQuery 1.4
jQuery(.'classname').hide() -- uses jQuery 1.2.6

If we need to use jQuery plugins which require a specific version of jQuery (different to 1.2.6) we should do the following:

1. Load the jQuery library needed
2. Load the plugin library which requieres a specific version of jQuery
3. Load and execute a custom "noConflict" script

For example, if the plugin music.js requires jQuery 1.4, we could do the following:

<script type='text/javascript' src='js/jquery_1.4.js'></script>
<script type='text/javascript' src='js/music.js'></script>   
<script type='text/javascript'>  
  
 var $jq = jQuery.noConflict(true);  
  
</script>  
  
<script type='text/javascript' src='js/jquery_1.2.6.js'></script>

This mechanism stores the newer version of jQuery under the variable $jq and allows the portal to keep using $ and jQuery for the old version while the plugins can use the required versions too.