« Back

Building jQuery based plugins in Liferay 6

General Blogs July 7, 2010 By Jonas Yuan

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Refer to http://jquery.com/

Liferay portal 6 uses Alloy UI instead of jQuery, which means YUI3 (http://developer.yahoo.com/yui/3/) is included as core part, and jQuery is not included as core part anymore.  Ideally you can use whatever version of jQuery you need for your custom developments, refering to the blog post Can I have different jQuery versions in Liferay? and ticket LPS-10872.

This article will introduce how to build jQuery based plugins in Liferay 6. Hope that this article would be helpful to upgrade custom portlets from 5.1.x or 5.2.x to 6.x.

Build jQuery based plugins
Here I use Liferay 6.0.3 GA (revision 57559) and plugins SDK.

  • Build a project called “sample-jquery-portlet” with folder “docroot” and build.xml
  • Add CSS under the folder /docroot/css
  • Add images under the folder /docroot/css
  • Add jquery under the folder /docroot/js
  • Add liferay-display.xml, liferay-plugin-package.properties, liferay-portlet.xml, portlet.xml under the folder /docroot/WEB-INF

Especially, add following lines, for example, in the file liferay-portlet.xml.
<portlet>
    <portlet-name>1</portlet-name>
    <icon>/images/world.png</icon>
    <header-portlet-css>/css/style.css</header-portlet-css>
    <header-portlet-javascript>/js/jquery.js</header-portlet-javascript>
    <footer-portlet-javascript>/js/jquery-ui-custom.js</footer-portlet-javascript>
    <css-class-wrapper>sample-jquery-portlet</css-class-wrapper>
</portlet>

Note that the property header-portal-javascript sets the path of JavaScript that will be referenced in the page's header relative to the portal's context path; and the property footer-portal-javascript sets the path of JavaScript that will be referenced in the page's footer relative to the portal's context path.

  • Add JSP files under the folder /docroot/jsp.

Note that you may include addition JavaScript at JSP file like

<script type='text/javascript' src='js/jquery_1.4.2.js'></script>

Sample Screenshots

Testing environment: Liferay portal 6.0.2.and 6.0 GA (6.0.3 - revision 57559)

A few jQuery examples:

Fade in

Animate

Fade out

Do it yourself
You can download the WAR with source code at:

sample-jquery-portlet-6.0.2.1.war

and drop it to $PORTAL_HOME/deploy or use UI "Plugins Installation" under Control Panel. For more details, you may refer to the book Liferay Portal 6 Enterprise Intranets.

If you want to use different jQuery version other than 1.4.2, you can go to the folder ${sample.jquery.portlet.war}/js and update jquery.js with expected version.

Migration

Supposed that you have custom portlets heavily using jQuery in 5.1 or 5.2, now you are planning to migrate to 6.x.  You can simply add different version of jQuery jquery.js in portlet specification liferay-portlet.xml as follows.

<header-portlet-css>/css/style.css</header-portlet-css>
<header-portlet-javascript>/js/jquery.js</header-portlet-javascript>
<footer-portlet-javascript>/js/jquery-ui-custom.js</footer-portlet-javascript>

That's it. It is simple, isn't it? your comments?

Threaded Replies Author Date
Great post, Jonas. jQuery is not only the... Frank Yu July 6, 2010 4:50 PM
Hi, Jonas, This is really nice. The pictures... Xinsheng Chen July 7, 2010 1:39 PM
Hi Jonas, it I want include jQuery in all... Denis Signoretto July 8, 2010 12:14 AM
Hi Denis, thanks. You may manage many portlets... Jonas Yuan July 8, 2010 6:59 AM
Hi Denis, The best way to do that would be to... Nate Cavanaugh July 20, 2010 9:28 AM
Hi All, I am new to liferay and... Mohamed Rizan August 9, 2010 5:05 AM
Hi Mohamed, you can share your code here. Thus... Jonas Yuan August 23, 2010 11:36 AM
hey thanks for a fine discussion... Mohamed... Path Finder LifeRay September 13, 2010 4:18 AM
Sorry All! Please help me! I have problem with... Nguyễn Quang Thông October 4, 2010 9:36 PM
Hi, Nguyễn, Thanks. Simply, you may use the... Jonas Yuan October 5, 2010 9:58 AM
Thank so much Jonas X Yuan! But i wonder what... Nguyễn Quang Thông October 5, 2010 7:40 PM
Oh, Jonas X. Yuan! I fixed this errors. I think... Nguyễn Quang Thông October 7, 2010 2:02 AM
Hi Nguyễn, cool! Thanks for updates. You can... Jonas Yuan October 7, 2010 2:13 PM
does header-portlet-xxx mean this xxx gets... Raja Nagendra Kumar December 4, 2010 6:30 PM
Hi Raja, Thanks. You can find info at ... Jonas Yuan December 5, 2010 7:40 AM
Hi Jonas, I have implemented this... Mayur Patel February 12, 2011 10:06 AM
Hi Mayur, Thanks. For Liferay 5.2.5, you may... Jonas Yuan February 14, 2011 9:14 AM
Thank you Jonas, your detailed explain is too... Raja Nagendra Kumar March 1, 2011 12:24 AM
If I need jquery widgets and scrolling 1.8.2 do... alex wom February 28, 2011 11:18 PM
Hi Alex, thanks. By default, jquery widgets... Jonas Yuan March 1, 2011 12:29 PM
hi, Is there any way to completely avoid... Raghavendra V March 7, 2011 12:00 AM
Hi Raghavendra, the portal core uses Alloy... Jonas Yuan March 7, 2011 10:28 AM
Hi guys, To remove AlloyUI altogether would... Nate Cavanaugh March 7, 2011 6:17 PM
Hi Nate, the reason behind to stick to jQuery... Raghavendra V March 7, 2011 8:40 PM
Thanks much Jonas, Raghavendra V March 7, 2011 8:22 PM
Please help. I added entries into... Marc Piparo March 17, 2011 3:30 PM
Hi Marc, you got FileNotFoundException: Could... Jonas Yuan March 19, 2011 8:31 AM
Hi jonas I have the problem over loading the... Manikandan S July 8, 2011 12:22 AM
Hi Mani, Just tested jQuery 1.6.2 and UI... Jonas Yuan July 11, 2011 7:27 AM
[...] Hi, I am facing a peculiar issue with... Anonymous July 15, 2011 2:14 PM
Hi Jonas, Yes i am refreshing the page after... Manikandan S July 20, 2011 1:35 AM
[...] I think Ajax tool kit Ajax no longer to... Anonymous August 21, 2011 10:36 PM
thxs Serdar Ayalp September 2, 2011 2:14 AM
[...] I think Ajax tool kit no longer to be... Anonymous September 5, 2011 4:30 AM
[...] You can create as portlet as plugin... Anonymous November 15, 2011 3:07 AM
[...] You can create as portlet as plugin... Anonymous November 15, 2011 9:47 PM
good article thanks Manikandan S January 2, 2012 3:26 AM
[...] Hi, I want to use jQuery in a portlet, i... Anonymous May 16, 2012 6:50 AM
Hi Jonas, the link to... Erich S. June 12, 2012 12:03 AM
Thanks, Erich, Yes, need to update download... Jonas Yuan June 19, 2012 3:51 PM

Great post, Jonas. jQuery is not only the default JavaScript framework in Liferay Portal 5.x, it is also widely used in out-of-box portlets from Liferay and custom portlets developed in Liferay community and enterprises. One of the most asked questions from my enterprise clients is how to handle the migration of jQuery-based portlets to Liferay Portal 6. With the solution explained in this blog, the migration shall be straight-forward. You can include your jQuery library in your own portlets running on Liferay Portal 6 and don't have to rewrite your portlets to use YUI3. Isn't it good to have both jQuery and YUI3 coexisted in your portal environment?
Posted on 7/6/10 4:50 PM.
Hi, Jonas,

This is really nice. The pictures are also good. Thanks!
Posted on 7/7/10 1:39 PM in reply to Frank Yu.
Hi Jonas,

it I want include jQuery in all *.war (many portlets in different war) what's the best way? Can I add jQuery as global include?

Thanks,
Denis.
Posted on 7/8/10 12:14 AM.
Hi Denis, thanks. You may manage many portlets with hook in a single plugin and add following in init_js.jsp (included in init.jsp):

<script type='text/javascript' src='js/jquery_1.4.2.js'></script>

Hope that it helps,

your comments?
Posted on 7/8/10 6:59 AM in reply to Denis Signoretto.
Hi Denis,
The best way to do that would be to simply include the jQuery javascript file from your theme. That will guarantee that it's global for all portlets.

You can also view my recent blog post for more info: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/using-jquery-or-any-jav­ascript-library-in-liferay-6-0
Posted on 7/20/10 9:28 AM in reply to Denis Signoretto.
Hi All,
I am new to liferay and portlet developement, i created my own portlet and it works fine in single column layout, but the problem is when i use it in 3 column layout in the center column, and if i refresh teh page , the page layout was changed to two column layout, i tried with this sample jquery portlet also, and i am getting the same problem,

Can any one pls suggest me am i missing anything..

Thanks in advance
Posted on 8/9/10 5:05 AM.
Hi Mohamed, you can share your code here. Thus anybody can give you comments.
Posted on 8/23/10 11:36 AM in reply to Mohamed Rizan.
hey thanks for a fine discussion... Mohamed please give ur comments here as jonas said we can join discussion here itself...
Posted on 9/13/10 4:18 AM in reply to Jonas X. Yuan.
Sorry All! Please help me!
I have problem with my ajax in liferay ( errors: "Liferay.fire is not a function" and "Liferay.Dockbar is not undefined")
I have I process2.js and declare process2.js in my jsp:

<script type="text/javascript" src="<%=HOST_URL%>/scripts/process.js"></script>
<script type="text/javascript" src="<%=HOST_URL%>/scripts/process2.js"></script>

(process2.js include AjaxGet2)

when i call AjaxGet2:
"AjaxGet2('<%=AddthongtinController%>','','add','divchild1','',"AjaxGet­2('<%=ShowListAddController%>','','show','divchild2','','' );" ) my portlet is run ok. But Liferay.fire and Liferay.Dockbar not work. what's happen with my ajax and liferay????


Thank alot.
Posted on 10/4/10 9:36 PM.
Hi, Nguyễn, Thanks. Simply, you may use the sample code: jQuery and AJAX as entry point. There are a lot of examples talking about jQuery and AJAX.

Refer to jQuery UI: http://jqueryui.com/

Hope that it helps.
Posted on 10/5/10 9:58 AM in reply to Nguyễn Quang Thông.
Thank so much Jonas X Yuan!
But i wonder what happen with my ajax, it run ok, but seem have some scramble or conflict with Liferay.Dockbar and Liferay.fire . Can you read it, please:
process2.js:
---------------
function AjaxGet2(address,param,containerid,divchild,revattribute,func){
//showloading();
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
$('#'+divchild).html("<div class='ajaxLoading'> &#272;ang t&#7843;i d&#7919; li&#7879;u... </div>");
$.ajax(
{
url:address,
type:"GET",
cache: false,
datatype:"html",
data:param,
success:function(text){

showResponseText2(text,containerid,divchild,revattribute,func);
//closeloading();
}
}
);
}
-----------------
You can see clearly my process.js in link:
---
https://docs.google.com/leaf?id=0B_fgXf97eQg1ZjhiYWQ4NWUtN2I1ZS00NDQ2LTh­iOWEtNzYwNDhiMDNjZjZk&hl=en
---
And if my process2 unusable, you can help me for some code demo in jqueryui, please.(i looked for http://jqueryui.com/ but i don't see ...). So sorry! But i'm newbie. Sorry for my disturbing.
---------
Thank for you're help!!!
Posted on 10/5/10 7:40 PM in reply to Jonas X. Yuan.
Oh, Jonas X. Yuan! I fixed this errors.
I think when my ajax return the object "text" which include something and have declares the Liferay.Dockbar and Liferay.Fire. So have conflict and duplicate.
For fix this error, i remove any code before <body></body> in object "text" return in my ajax.
I use javascript code:
----------------------------------------
AjaxGet2(address,param,containerid,­divchild,revattribute,func){
...
...
...
$.ajax(
{
url:address,
type:"GET",
cache: false,
datatype:"html",
data:param,
success:function(text){
var str = text;
var indexBegin = str.indexOf('<body');
var indexEnd= str.indexOf('</body>');
var str1 = str.substring(indexBegin ,indexEnd+6);
showResponseText2(str1,containerid,divchild,revattri­bute,func);
//closeloading();
}
}
);
}
------------­----------------------------
And now the liferay.Dockbar and another not die. But i wonder have anyway?
Posted on 10/7/10 2:02 AM in reply to Nguyễn Quang Thông.
Hi Nguyễn, cool! Thanks for updates. You can move forward ...
Posted on 10/7/10 2:13 PM in reply to Nguyễn Quang Thông.
does header-portlet-xxx mean this xxx gets included during the header time of the page building and is available to body (i.e all the portlets that page can use this xxx) and footer jsp too.

Also, could you pl. explain what is this tag css-class-wrapper and where it is used.

Regards,
Raja Nagendra Kumar,
C.T.O
www.tejasoft.com
Posted on 12/4/10 6:30 PM.
Hi Raja, Thanks. You can find info at

Applying jQuery and its custom UI in Liferay 6 plugins

http://www.liferay.com/web/jonas.yuan/blog/-/blogs/applying-jquery-and-it­s-custom-ui-in-liferay-6-plugins.

like:

Note that the property header-portal-javascript sets the path of JavaScript that will be referenced in the page's header relative to the portal's context path; and the property footer-portal-javascript sets the path of JavaScript that will be referenced in the page's footer relative to the portal's context path.

Similarly, the property header-portlet-css sets the path of CSS that will be referenced in the page's header relative to the portlet's context path; while the property footer-portlet-css sets the path of CSS that will be referenced in the page's footer relative to the portlet's context path.

Hope that it helps,

Thanks,

Jonas
Posted on 12/5/10 7:40 AM in reply to Raja Nagendra Kumar.
Hi Jonas,

I have implemented this sample-jquery-portlet in LF6, Its looking very excellent and having many functionalities but I have to implement same thing in LF5.2.3

Which kind of changes I will have to make to run that same portlet in LF5.2.3 ?????...help me in that....

Thanks in Advance
Posted on 2/12/11 10:06 AM in reply to Jonas X. Yuan.
Hi Mayur, Thanks.

For Liferay 5.2.5, you may refer to the post: Using jQuery (or any Javascript library) in Liferay 6.0 (by Nate) at http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/using-jquery-or-any-jav­ascript-library-in-liferay-6-0.

Hope that it helps.
Posted on 2/14/11 9:14 AM in reply to Mayur C. Patel.
If I need jquery widgets and scrolling 1.8.2 do I need to assemble them in a jquery-ui-custom.js? Another question: does your books available in ebook format? I live in Italy and I would like to download quickly.
Posted on 2/28/11 11:18 PM.
Thank you Jonas, your detailed explain is too good.
Posted on 3/1/11 12:24 AM in reply to Jonas X. Yuan.
Hi Alex, thanks.

By default, jquery widgets and scrolling should be included in UI 1.8.2. If possible, use UI latest version like 1.8.9 and jQuery 1.5.

Yes, ebook is available at https://www.packtpub.com/authors/profiles/jonas-x-yuan.

Hope that it helps.
Posted on 3/1/11 12:29 PM in reply to alex wom.
hi,

Is there any way to completely avoid Alloy Ui/YUI being loaded on liferay portlets and use only jQuery
Posted on 3/7/11 12:00 AM in reply to Jonas Yuan.
Hi Raghavendra, the portal core uses Alloy Ui/YUI as default settings. But in your portlets, you can avoid using Alloy Ui/YUI. Of course, you can just use jQuery as you expected. This is the beauty of Liferay portal.
Posted on 3/7/11 10:28 AM in reply to Raghavendra V.
Hi guys,
To remove AlloyUI altogether would break any of the bundled portlets that rely on it.

To ask a different question, what could AlloyUI do better to help you not wish to remove it? We're always looking for great feedback, so if there's an area of AlloyUI that you guys would like to see improved or feel it's falling short of your needs, don't hesitate to ask emoticon
Posted on 3/7/11 6:17 PM in reply to Jonas Yuan.
Thanks much Jonas,
Posted on 3/7/11 8:22 PM in reply to Jonas Yuan.
Hi Nate, the reason behind to stick to jQuery is we have already developed few components based on jQuery framework and loading multiple frameworks is not good idea in page performance point of view.
Posted on 3/7/11 8:40 PM in reply to Nate Cavanaugh.
Please help.
I added entries into ad-portlet/WEB-INF/liferay-portlet.xml as follows:

<portlet>
<portlet-name>admanager</portlet-name>
<icon>/images/icon.­png</icon>
<header-portlet-css>css/style.css</header-portlet-css>
<header-po­rtlet-javascript>javascripts/jquery.js</header-portlet-javascript>
<­layout-cacheable>true</layout-cacheable>
<add-default-resource>true</add-defau­lt-resource>
</portlet>


but now the ad manager portlet errors loading up:

org.springframework.be

ans.factory.BeanDefinitionStoreException: IOException parsing XML document from PortletContext res
ource [/WEB-INF/context/admanager-portlet.xml]; nested exception is java.io.FileNotFoundException: Could not open Portle
tContext resource [/WEB-INF/context/admanager-portlet.xml]


any ideas what I'm doing wrong?
Posted on 3/17/11 3:30 PM.
Hi Marc, you got
FileNotFoundException: Could not open Portle tContext resource [/WEB-INF/context/admanager-portlet.xml].

Could you please double check /WEB-INF/context/admanager-portlet.xml?

Thanks,
Posted on 3/19/11 8:31 AM in reply to Marc Piparo.
Hi jonas
I have the problem over loading the javascript file in my custom portlet.
In my liferay-portlet.xml file
<portlet>
<portlet-name>165</portlet-name>
<instanceable>true</instanceable>
<header-portlet-javascript>/html/portlet/book/main.js</header-portlet-javascript­>
</portlet>
When I make some changes in my main.js file, the js file not being loaded that is after refresh the page i couldn't get the modified values. It forced me to restart the tomcat server. I cleared cookies of my browser but still having problem.
Note: I am using LR 6.0.6 and i m not using Plugin i m creating portlet in LR tomcat itself.
Posted on 7/8/11 12:22 AM in reply to Jonas Yuan.
Hi Mani,

Just tested jQuery 1.6.2 and UI 1.8.14 in Liferay 6.1, the approach mentioned in this post was working properly.

By the way, what's the /html/portlet/book/main.js?

Do you refresh the page?

Thanks

Jonas
Posted on 7/11/11 7:27 AM in reply to Mani kandan.
[...] Hi, I am facing a peculiar issue with <portlet:namespace/> when used with jQuery, i followed the blog by Jonas, but quiet strangely my jQuery Javascript method is not picked up <aui:button... [...] Read More
Posted on 7/15/11 2:14 PM.
Hi Jonas,
Yes i am refreshing the page after make some changes in my main.js file but I couldn't get the modified values. Once I restart the server then only it is affecting the values.
/html/portlet/book/main.js - is my js file path
/html/portlet/book/view.jsp - is my jsp file path
Posted on 7/20/11 1:35 AM in reply to .
[...] I think Ajax tool kit Ajax no longer to be used for Liferay's new version. Yes better to choose DWR DWR Link Or jQuery Link Mark as an Answer [...] Read More
Posted on 8/21/11 10:36 PM.
Posted on 9/2/11 2:14 AM.
[...] I think Ajax tool kit no longer to be used for Liferay's new version. Yes better to choose DWR DWR Link Or jQuery Link Mark as an Answer [...] Read More
Posted on 9/5/11 4:30 AM.
[...] You can create as portlet as plugin portlet or create portlet in liferay-portal-6.0.6\tomcat-6.0.29\webapps\ROOT\html\portlet. Refer this blog blog and this link Flag Please sign in to flag this as... [...] Read More
Posted on 11/15/11 3:07 AM.
[...] You can create as portlet as plugin portlet or create portlet in liferay-portal-6.0.6\tomcat-6.0.29\webapps\ROOT\html\portlet. Refer this blog blog and this link Flag Please sign in to flag this as... [...] Read More
Posted on 11/15/11 9:47 PM.
good article thanks
Posted on 1/2/12 3:26 AM in reply to .
[...] Hi, I want to use jQuery in a portlet, i found a way to do this in this blog : http://www.liferay.com/web/jonas.yuan/blog/-/blogs/building-jquery-based-plugins­-in-liferay-6 I add this two line in... [...] Read More
Posted on 5/16/12 6:50 AM.
Hi Jonas,
the link to sample-jquery-portlet-6.0.2.1.war is dead...
Posted on 6/12/12 12:03 AM.
Thanks, Erich,

Yes, need to update download link.
Posted on 6/19/12 3:51 PM in reply to Erich S..