Ajax in Liferay Portlet using JQuery and AlloyUI

Sometimes you need to send or retreive data and update a small portion of portlet without a page refresh. Ajax is the solution to perform that and this tutorial will show how to use it in Liferay Portal.

Up to version 6.2 Liferay provides the JavaScript Framework AUI (AlloyUI). This framework can be used to perform the Ajax call. AUI was replaced by JQuery starting from the version 7.

In this tutorial, I will use MVCPortletas Portlet Framework. The method serveResource of the MVCPortletprovides data like String, JSON, XML as response and is used to make Ajax call.

This tutorial will conver the main uses of Ajax call with both AlloyUI and JQuery:

Prerequisites

Before seeing how to use Ajax in Liferay portlet, you need to understand Portlet namespace. Portlet namespace is a unique value generated and associated to each Portlet by the Portal. Namespacing avoids Portlet element to conflict with other Portlet elements having the same name. It ensures that the element name is uniquely associated with this portlet.

Why is this important ? Because if you don’t “namespace” parameters in your Ajax call, the Portal will not recognize them and simply ignore them. Liferay provides the taglib “portlet” to namespace parameters. To use it you must import the taglib to your JSP file as below:

1

<%@tagliburi="http://java.sun.com/portlet_2_0"prefix="portlet"%>

Then you must prefix the html element you want to send to the server as following:

1

2

// parameter is namespaced.

<portlet:namespace/>parameter:'value'

A complete example is shown in the next section.

This solution can become very heavy especially if you have many parameters within your portlet. Another solution to avoid namespacing your parameters is by setting the property requires-namespaced-parameters to falsein the liferay-portlet.xml

With this Portlet configuration, parameters are recognized in the serveResourcewithout prefixing them by <portlet:namespace/>.

In this tutorial, I will use the second solution. And let’s see now how to make Ajax call.

AlloyUI

Send data to the server

The JavaScript Framework AlloyUI provides the A.io.request method to perform the Ajax call. The first parameter concern the URL which will handle the request. In the Liferay context, you must provide a resourceURLas below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<%@tagliburi="http://java.sun.com/portlet_2_0"prefix="portlet"%>

<portlet:defineObjects />

<!-- Defining the resourceURL -->

<portlet:resourceURL var="sendData" />

<script type="text/javascript">

/*

* Ajax call using AlloyUI.

* On button click the serveResource is called with the submited data.

*/

functionsendDataToServer(){

AUI().use(

'aui-io-request',

function(A){

A.io.request(

'<%=sendData%>',

{

method:'post',

// Sending three parameters.

data:{

firstname:'Radouane',

lastname:'Roufid',

site:'www.roufid.com'

}

}

);

}

);

}

</script>

In the previous example, we used an Ajax call to send 3 parameters to the server using “post” method. Note that the parameters aren’t namespaced, in fact the property requires-namespaced-parameters is set to falsein the liferay-portlet.xml. Below the configuration :

Submit form to the server and receive response

Ajax is often used to submit forms to the server and receive response. Let’s see how to perform that.

Below an example of a very simple sumcalculator : A form is displayed on the screen in which the client must fill two fields and submit it to perform the sum. The calculation is done in the server side and the result is displayed without a page refresh all using Ajax call.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<%@tagliburi="http://java.sun.com/portlet_2_0"prefix="portlet"%>

<portlet:defineObjects/>

<!--Defining the resourceURL-->

<portlet:resourceURL var="submitForm"/>

<script type="text/javascript">

functionsubmitFormToServer(){

AUI().use(

'aui-io-request',

function(A){

A.io.request(

'<%=submitForm%>',

{

method:'post',

dataType:'json',

// Sending the form to the server.

form:{

id:'calculator'

},

// Receiving data from the server. Data is contained in this.get('responseData').

on:{

success:function(){

varresponse=this.get('responseData');

document.getElementById('result').innerHTML=response.result;

}

}

}

);

}

);

}

</script>

<form id="calculator">

<div>Supercalculator!</div>

<br/>

<table>

<tr>

<td><input type="text"name="firstInput"/></td>

<td>+</td>

<td><input type="text"name="secondInput"/></td>

<td>=</td>

<td><div id="result"></div></td>

</tr>

</table>

<br/>

<input type="button"value="Submit"onclick="submitFormToServer()">

</form>

Note that the form is submitted by its id. In the server side, all the fields are retrieved by their name.

JQuery

JQuery is the default JavaScript Framework starting from the version 7 of Liferay. If you want to use it in the previous version rather that AlloyUI, you just need to include the library in your JSP file as below:

Submit form to the server and receive response

The same example as AlloyUI will be taken to perform a form submission using JQuery. A very simple sumcalculator: A form is displayed on the screen in which the client must fill two fields and submit it to perform the sum. The calculation is done in the server side and the result is displayed without a page refresh all using Ajax call.