Roufid

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 MVCPortlet as Portlet Framework. The method serveResource of the MVCPortlet provides 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:

AlloyUI

JQuery


The examples used in this tutorial are available on Github. Download the source

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:

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

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 false in the liferay-portlet.xml

With this Portlet configuration, parameters are recognized in the serveResource without 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

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 resourceURL as below:

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 false in the liferay-portlet.xml. Below the configuration :

If you want to namespace the parameters, set the property requires-namespaced-parameters to true and update the Ajax call as following:

In server side, the data are retrieved from the resourceRequest in the serveResource method using ParamUtil.

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 sum calculator : 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.

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

Note that the sum is converted to a Json object and written in the resourceResponse.

The below image show the form before submission

Liferay Portlet calculator form before submission

Result after form submission:

Submitting the form and getting the result with Ajax Call without page refresh


The examples used in this tutorial are available on Github. Download the source

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:

Below how to perform Ajax call in Liferay portlet.

Same as AlloyUI, you need the use the JQuery Ajax call by specifing a resourceURL as below:

In server side, the data are retrieved from the resourceRequest in the serveResource method using ParamUtil.

The same example as AlloyUI will be taken to perform a form submission using JQuery. A very simple sum calculator: 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.

Below the client side code:

Note that the form submission is performed by $(‘#calculator’).serialize().Retrieving the data on the server side:

Note that the sum is written is a Json object and written in the resourceResponse.

he below image show the form before submission

Liferay Calculator form before submission

Result after form submission:

Getting the result with Ajax Call without page refresh


The examples used in this tutorial are available on Github. Download the source

References