[Liferay] Ajax with JQuery, AUI with Action URL / Resource URL

Though its pretty simple and has been there for a long time now, I am writing this post to help new users.

Check the code below with three links. We will use these links to call our data using ajax calls.

	<div id="mainCanvas">
	<a href="#" id="dataLink" class="linkBtn">Get User Data using ActionUrl</a>
	<span id="userData"></span>
	<hr />
	</div>
	<div id="mainCanvas2">
	<a href="#" id="dataLink2" class="linkBtn">Get User Data using ResourceURL and ServeResource</a>
	<span id="userData2"></span>
	<hr />
	</div>
	<div id="mainCanvas3">
	<a href="#" id="dataLink3" class="linkBtn">Get User Data using ResourceURL and ServeResource Alloy UI</a>
	<span id="userData3"></span>
	<hr />
	</div>

view raw htmlcode.html hosted with ❤ by GitHub

To make an ajax call using JQuery with actionURL

	$("#dataLink").click(function(){
	var url = '<portlet:actionURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>"><portlet:param name="ajaxAction" value="getData"></portlet:param></portlet:actionURL>';
	$.post(url, {}, function(data){
	$("#userData").html(data);
	})
	});

view raw snippet.js hosted with ❤ by GitHub

To make an ajax call using JQuery with resourceURL

	$("#dataLink2").click(function(){
	var url = '<portlet:resourceURL id="getDataResourceURL"></portlet:resourceURL>';
	$.post(url, {username:'ravi'}, function(data){
	$("#userData2").html(data);
	})
	});

view raw snippet.js hosted with ❤ by GitHub

To make an ajax call using AlloyUI and resourceURL

	$("#dataLink3").click(function(){
	var url = '<portlet:resourceURL id="getDataAUIResourceURL"></portlet:resourceURL>';
	AUI().use(
	'aui-io-request',
	function (Y) {
	Y.io.request(
	url,
	{
	on: {
	success: function() {
	var data = this.get('responseData');
	$("#userData3").html(data);
	}
	}
	}
	);
	}
	);
	});

view raw snippet.js hosted with ❤ by GitHub

Hope this helps someone in need.

You can get the source of the portlet here on github
Ajax JQuery Portlet
This portlet is for 6.1.20 version of Liferay and for previous versions you can check here.
Ajax JQuery Portlet

Until next time. Keep Ajax -ing :-)