« Back

Can I have different jQuery versions in Liferay?

Company Blogs July 3, 2010 By Julio Camarero Staff

Yes, you can! We have seen lately many people asking about this in the forums and several projects.

Liferay 5.2 uses uses jQuery 1.2.6. and many people wonder if they can use a different version for their plugins or themes. The answer is yes :)

 

If you are using Liferay 6, 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. This can be easily done using the method jQuery.noConflict(); .

We have created a wiki page called Several jQuery versions within Liferay which will help you to understand more technical details. Feel free to add more examples about it!

See you soon!

 

Edited: Please, read the wiki page for the latest details about this. For example, in several versions of jQuery, this will only work if you do jQuery.noConflict(true) instead of jQuery.noConflict()

Threaded Replies Author Date
Hi Julio, thanks. This is useful info. Are... Jonas Yuan July 3, 2010 8:14 AM
Hi Jonas, it woud be quite simple. Why don't... Julio Camarero July 6, 2010 12:44 AM
Thanks, Julio. Got sample jQuery portlet of... Jonas Yuan July 6, 2010 10:59 AM
Hi Julio, I think this is possible without... Steven Decock August 13, 2010 8:19 AM
Hi Steven, you are right, there is no need to... Julio Camarero August 31, 2010 4:54 AM
Hi Julio, I've tried following your steps that... Chris Chan August 5, 2011 7:57 PM
Hi Chris, if the jquery file isn't picked up... Julio Camarero August 28, 2011 11:48 PM
Julio, I am still have this issue showing... Srikanth Reddy Sanivarapu November 8, 2011 5:39 AM
I solved this by adding <script... Srikanth Reddy Sanivarapu November 8, 2011 5:44 AM
Thank you for sharing your solution Srikanth! ... Julio Camarero November 8, 2011 6:42 AM
Hi There is a problem with the use of versions... rodrigo cedillo November 6, 2012 8:40 AM
Hola Julio.(ahora en español) ¿Existe problema... rodrigo cedillo November 6, 2012 8:54 AM
Hola Rodrigo, hace muchos años de aquella... Julio Camarero November 7, 2012 2:06 AM
Julio, muchas gracias por responder. ¿Estáis... rodrigo cedillo November 7, 2012 5:58 PM
Hola Rodrigo, el rendimiento del navegador... Julio Camarero November 8, 2012 12:01 AM
Hi I couldn't able to use jquery 1.8.3 with... Madhan PE December 26, 2012 1:25 AM

Hi Julio, thanks. This is useful info.

Are you able to create sample jQuery portlet to show usage of jQuery 1.4.x in plugins SDK?

http://issues.liferay.com/browse/LPS-10872
Posted on 7/3/10 8:14 AM.
Hi Jonas, it woud be quite simple.
Why don't you try to add it as a community plugin? I will help you if you find any problem. For liferay 6 you don't have to do anything special, just include jquery.js in your portlet and use it normally.

For liferay 5.2, you should just make sure your jquery version is loaded first and then do the jquery.noConflict(). All the logic is in top_head.jsp, so you may need to overwrite this file with a hook. I would do the following steps:
1. Remove jquery.js from the property javascript.everything.files in portal-ext.properties
2. Include jquery.js (the newer version) in your plugin (in liferay-portlet.xml, <footer-portlet-javascript>) and all the jQuery plugins you need after that.
3. Include another js file in your plugin after this one which does the following:
<script type='text/javascript'>

var $jq = jQuery.noConflict();

</script>
(From this moment you could use the variable $jq for your newer version of jQuery in your plugin)

4. Overwrite the file top_head.jsp from a hook plugin (it could be done in the same plugin) and include the original file, and at the bottom add the version of jQuery required by liferay like this:
<script src="..****.../jquery.js" type="text/javascript"></script>

If you need the same jQuery library for more plugins, you may consider to include the jQuery file and do the noConflict method directly in top_js-ext.jspf. You would still need to follow steps 1 and 4.

As I said before, let me know if you find any problem and I will help you to do it,
cheers!
Posted on 7/6/10 12:44 AM in reply to Jonas X. Yuan.
Thanks, Julio. Got sample jQuery portlet of jQuery 1.4.2 working well in Liferay 6 ...

Will post it shortly.
Posted on 7/6/10 10:59 AM in reply to Julio Camarero.
Hi Julio,

I think this is possible without changing the "javascript.barebone.files" or "javascript.everything.files" properties. Which makes it a lot simpler.

I reduced the proposed solution to only the following (for Liferay 5.2.2):

1. Add jquery-1.4.2.min.js in the following folder: /html/js/jquery14
2. Overwrite the file top_jsf.jspf by adding the following at line 191 (right before the barebone.jsp and everything.jsp files are referenced):
----------
<script type='text/javascript' src='/html/js/jquery14/jquery-1.4.2.min.js'></script>
<script type='text/javascript'>

var $jq = jQuery.noConflict();

</script>
----------

This seems to do the trick.
Afterwards both versions of jQuery can be used through jQuery (1.2.6) and $jq (1.4.2)
Posted on 8/13/10 8:19 AM in reply to Julio Camarero.
Hi Steven,

you are right, there is no need to do that in most situations. If you need the newer jquery version for your theme, you can do as you did. However, if you need it only for a portlet, you can do what is explained here to load the newer jquery version only when needed. I will update the wiki page and the blog. Thanks a lot!
Posted on 8/31/10 4:54 AM in reply to Steven Decock.
Hi Julio,
I've tried following your steps that you provided here in the comments for a portlet plugin for Liferay 5.2.x but it doesn't seem to be working.
It seems that by removing the jquery.js from the portal-ext.properties, even though I've modified the top_head.jsp to include the jquery.js file again, jquery doesn't seem to be picked up by the Liferay standard UI components (e.g. the dock doesn't show anymore).
In Firebug, I see a few errors:
1. jQuery.cookie is not a function
2. a.livequery is not a function
3. k.editable is not a function

Is there something that I should be doing differently?
Thanks!
Posted on 8/5/11 7:57 PM in reply to Julio Camarero.
Hi Chris,

if the jquery file isn't picked up by Liferay it is probably because you are not adding it in the right place. Take a closer look to top_head.jsp and see if your line is being executed.

cheers!
Posted on 8/28/11 11:48 PM in reply to Chris Chan.
Julio,

I am still have this issue showing that, 1. jQuery.cookie is not a function
2. a.livequery is not a function
3. k.editable is not a function

and my Add Page and dock and session expiration messages are not showing up any more. What wrong I am doing.? I am using jsf - richfaces portlet in my application. Please let me know if anything is wrong here. Thanks.
Posted on 11/8/11 5:39 AM in reply to Julio Camarero.
I solved this by adding

<script type='text/javascript'>
var $jq = jQuery.noConflict(true);
</script>

Here "true" is required. I was trying without adding that. Anyway, thanks for the useful post. Thanks.

Regards,
Srik
Posted on 11/8/11 5:44 AM in reply to Srikanth Reddy Sanivarapu.
Thank you for sharing your solution Srikanth!

I think it was already done in that way in the wiki page that is linked in the post...
Posted on 11/8/11 6:42 AM in reply to Srikanth Reddy Sanivarapu.
Hi

There is a problem with the use of versions of jQuery for Liferay version 4.4.1?, I know we're in a long-standing version, but we're having problems in the performance of the service and we want take out this rule is the cause.

tnks for yours feedback
Posted on 11/6/12 8:40 AM.
Hola Julio.(ahora en español)
¿Existe problema de versiones de JQuery en Liferay versión 4.4.1?, sabemos que tenemos una de las primeras versiones de Liferay, y hemos notado una disminución en el performace del servidor. Lo que queremos es descartar que ésta sea una posible causa de tal degradación del servicio.

Gracias por la atención y retroalimentación
Saludos
Posted on 11/6/12 8:54 AM.
Hola Rodrigo,

hace muchos años de aquella versión, no recuerdo de hecho qué versión de jQuery traía la 4.4.1. ¿Estáis intentando usar una versión más moderna de jQuery a la vez? ¿La disminución del rendimiento ocurre al usar las 2 versiones? ¿El rendimiento baja en el navegador nada más o el servidor también ha empeorado?

Mi recomendación es que migréis ese portal cuanto antes, vais a notar muchísimas mejoras en rendimiento y otros muchos aspectos. Además, a partir de la 6.0 ya no tendréis ningún conflicto con jQuery. Sé que esto no siempre es fácil de hacer, pero desde Liferay podemos ayudaros si lo necesitáis.

un saludo!
Posted on 11/7/12 2:06 AM in reply to rodrigo cedillo.
Julio, muchas gracias por responder.
¿Estáis intentando usar una versión más moderna de jQuery a la vez?
Si, la versión de jQuery es 1.1.4 en LF 4.4.1 y se está queriendo usar a la vez la versión 1.7.1 de jQuery con la función var $ = jQuery.noConflict(true);
¿La disminución del rendimiento ocurre al usar las 2 versiones?
sospecho que es la razón principal
¿El rendimiento baja en el navegador nada más o el servidor también ha empeorado?
en ambos, el procesador sube hasta 99% y llega un momento que se detiene.

Opinas que sea el causal de la baja de rendimiento?

saludos!!!
Posted on 11/7/12 5:58 PM in reply to Julio Camarero.
Hola Rodrigo,

el rendimiento del navegador podría verse afectado por esto, pero esto no debería influir de ninguna manera en el rendimiento del servidor, debéis tener algo más mal por ahí. Os aconsejo que hagáis pruebas de rendimiento y de carga a vuestros distintos desarrollos para encontrar el problema.

un saludo
Posted on 11/8/12 12:01 AM in reply to rodrigo cedillo.
Hi I couldn't able to use jquery 1.8.3 with liferay default jquery 1.1.4. I am using liferay 4.3.3. Please assist.
Posted on 12/26/12 1:25 AM.