« 返回到 Development

Multiple Versions of jQuery

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.

0 附件
518280 查看
平均 (4 票)
满分为 5,平均得分为 4.25。
评论
讨论主题回复 作者 日期
well...its not running, not on my theme Vergil Theng Soo Tan 2010年7月22日 上午3:21
I'm newbie to Liferay. I have to work with... tremen _73 2010年9月24日 下午3:08
Is this valid for 5.2.3 i cant find any... Anders Olme 2011年4月1日 上午12:35
Hi Anders, This is absolutely valid for 5.2.3.... Jonny Olliff-Lee 2011年5月4日 下午2:12
This is working great for me with two minor... Jonny Olliff-Lee 2011年5月4日 下午2:15
Hi, If I'm reading this correctly, if I'm... Chris Chan 2011年8月5日 上午5:28
Jonny, Does your custom var $jq =... Joseph Cook 2011年8月26日 上午7:51
Man, can´t do it... I tried everything in my... Marcus Abreu 2011年10月5日 上午6:41
Liferay ver. 4.2 with jQuery ver. 1.1.4... Bogus Lis 2011年12月23日 上午2:54
I checked the portal-ext.properties and there... Robert Cruz 2012年7月18日 下午12:35

well...its not running, not on my theme
在 10-7-22 上午3:21 发帖。
I'm newbie to Liferay.
I have to work with Liferay 5.0.1, that uses jQuery 1.1.4, but I would like to take advatange from a later version of jQuery.

What contents are supposed to be at custom noConflict script. It's referred at article but I don't know how to create it actually.
在 10-9-24 下午3:08 发帖。
Is this valid for 5.2.3 i cant find any references in top_head to jquery.
在 11-4-1 上午12:35 发帖。
Hi Anders,

This is absolutely valid for 5.2.3. What are trying to do? Overwrite the portal version of jQuery or just use a different version for particular portlets?
在 11-5-4 下午2:12 发帖以回复 Anders Olme
This is working great for me with two minor changes:

var $jq = jQuery.noConflict(true); // I've altered the wiki page to reflect this

<script type="text/javascript" src="/html/js/jquery/jquery.js"></script> //The second change is a link to the portal version of the jQuery file.
在 11-5-4 下午2:15 发帖。
Hi,
If I'm reading this correctly, if I'm trying to overwrite the version for a particular custom portlet, I just include that snippet of code above in my portlet's jsp (obviously changing the music.js to whatever I need)?
在 11-8-5 上午5:28 发帖。
Jonny,
Does your custom var $jq = jQuery.noConflict(true); script need to be written exactly as you show here?

I've done that, and the other steps you suggest but can't get it to work. I still have conflicts.

Thx
在 11-8-26 上午7:51 发帖以回复 Chris Chan
Man, can´t do it...

I tried everything in my portlet, but just can do it....I tried this:

<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>

Off course, some changes made ( imported the jquery that i wanted, etc...) but it won´t go...An i doing something wrong??
在 11-10-5 上午6:41 发帖。
Liferay ver. 4.2 with jQuery ver. 1.1.4
Succesfully loaded jQuery ver. 1.7.1 (with DataTable plugin ver. 1.8.2)
Unfortunately .bind() core method from jQuery 1.7.1 doesn't work.
Any advice?
在 11-12-23 上午2:54 发帖。
I checked the portal-ext.properties and there is no entry for javascript.barebone.files and javascript.everything.files, however I do see the reference in the top_js.jspf.

Since I do not see these entries I do not see a way to remove the reference to the jQuery 1.2.6 and manually add it to the portal_normal.vm file since I want the current jQuery library available to the entire theme this includes jQueyUI and additional libraries.

I tried many of the steps listed in this wiki and the referring page leading me here and no luck. I am assuming once I remove the code reference to the jQuery library used by Liferay 5.3 then I can manually add it after adding the version I want to use.

Should the script tags be added to the portal_normal.vm?
在 12-7-18 下午12:35 发帖。