Blogs

Can I have different jQuery versions in Liferay?

Julio Camarero

July 03, 2010

Less Than a Minute Read

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

16 Comments

Please sign in to comment.

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

Please sign in to reply.

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!

Please sign in to reply.

Thanks, Julio. Got sample jQuery portlet of jQuery 1.4.2 working well in Liferay 6 ...

Will post it shortly.

Please sign in to reply.

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)

Please sign in to reply.

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!

Please sign in to reply.

Chris Chan Julio Camarero

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!

Please sign in to reply.

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!

Please sign in to reply.

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.

Please sign in to reply.

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

Please sign in to reply.

Julio Camarero 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...

Please sign in to reply.

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

Please sign in to reply.

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

Please sign in to reply.

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!

Please sign in to reply.

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

Please sign in to reply.

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

Please sign in to reply.