Blogs »
Use jQuery in Liferay 6 portlets

 Just few tips how to use some jQuery UI (like autocomplete) in Liferay 6 portlets:

1. Add jQuery into your portlet - put into portlet definition in liferay-portlet.xml lines like:

<header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js</header-portlet-javascript>
<header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js</header-portlet-javascript>
2. Sample of Autocomplete:
 
<input type="text" autocomplete="off" name="<portlet:namespace/>organizationName" id="<portlet:namespace/>organizationName"/>

<aui:script>
var orgs = ['EmDev Limited', 'Google Inc.', 'Microsoft Inc.'];
$( '#<portlet:namespace/>organizationName' ).autocomplete({
 source: orgs
});
</aui:script>
 
Only need to add styles for jQuery components
 

Alexey Kakunin

Twitter emforge

About Me I hope to make EmForge really useful for all developers

Activity Details
<b>53</b> Blog Entries 53 Blog Entries RSS
<b>451</b> Tasks 451 Tasks
<b>64</b> Friends 64 Friends