jQuery in Liferay Portal

---

By default jQuery is not added in Liferay. But there is a way to add jQuery in Liferay. This articles basically explains how to add third party JavaScript (JS)  libraries in Liferay portal. In earlier version of liferay, jQuery was available  by default. But when alloy was introduced the jQuery stuffs were removed . Still many developers like to use jQuery along with Alloy in various Liferay developments. 

---

Add jQuery in portlet level:

We can add jQuery in specific portlet. In liferay-portlet.xml under header-portal-javascript we can inject our jQuery.

[richfocus title=’Code Example’ purpose=’code’]

<portlet>
		<portlet-name>sample</portlet-name>
		<icon>/icon.png</icon>
		<header-portlet-css>/css/main.css</header-portlet-css>
		<header-portal-javascript>
			http://code.jquery.com/jquery-latest.min.js
		</header-portal-javascript>
		<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
		<css-class-wrapper>sample-portlet</css-class-wrapper>
	</portlet>

[/richfocus]

[richfocus title=’Note’]

Suppose we have injected jQuery in 2 different portlets as shown in the above and both the portlets are added on the same portal page. In this scenario the jQuery will be loaded 2 times which may cause some conflicts.

[/richfocus]

Making jQuery available for all portlets:

Sometimes we may require jQuery for multiple portlets. In that case adding jQuery in individual portlet does not make any sense. So we must make jQuery available for the entire portal. There are 2 options we can make jQuery available for the entire portal.

Option 1: Including jQuery in theme level

The file portal_normal.vm of a theme is loaded on each page of the portal. Therefore this file is the good choice to add our jQuery stuffs. Including jQuery in portal_normal.vm will make jQuery available for all the portlets. Just to add below lines in header section of portal_normal.vm file. 

<script src=”http://code.jquery.com/jquery-latest.min.js”></script>

Here we are adding jQuery from external source. If required we can download the JS file and keep it under js folder of the theme. After that we can point to the local jQuery file of the theme. 

[richfocus title=’Problem in the above approach’]

There is a problem in the above approach. If we change the theme then our jQuery will no longer be available. The above approach is applicable when we know that our theme is not going to change in future and we are stick to one and only one theme. 
[/richfocus]

Option 2: Inject jQuery by Hook

In this approach we can simply write one JSP Hook. We can override the JSP file “/html/common/themes/top_js-ext.jspf” through a simple JSP hook and add the entries for the JavaScript libraries that you want to inject. For an example, the following line needs to be inserted into this file and deployed as a hook.

 <script src=”http://code.jquery.com/jquery-latest.min.js”></script>

[richfocus title=’Note’]

In this approach even if we change our theme the jQuery will still be available for the entire portal.  In above we have discussed only about jQuery. In fact we can inject any type of JavaScript Library like Ext JS, Yahoo JS etc. 

[/richfocus]