AUI Ajax in liferay portlet

Liferay supports Ajax with it’s build in Javascript library called Alloy UI. You can make AUI Ajax call from your portlet JSP to send request to your portlet and can show the result on page.

What is Ajax ?

We all know it. Ajax = Asynchronous JavaScript and XML. It’s technique to asynchronously send / retrieve data to update small portion of page without web page refresh. You refer this link to know more about Ajax.

AUI Ajax call in Liferay Portlet

 

AUI Ajax in Liferay Portlet

Many times you need to make ajax call to update portlet content. Portlet are responsible for producing small portion of whole page. Because of this reason, making ajax call in portlet is slightly different than normal java/j2ee application.

The most common use of ajax in Liferay porltet is to call resourceURL in Ajax. Liferay (till version 6.2) ships with java script framework called AUI (AlloyUI). Starting from liferay 7, it uses JQuery (instead of AUI) . In this article, you will see how to make AUI ajax call in Liferay portlet.

It’s easy to understand liferay mvc portlet so I start with it. Create liferay mvc portlet with project name ‘ajax-test‘ and ‘-portlet‘ will be appended by Liferay IDE. Portlet class I created is com.opensource.tech.blog.portlet.TestAjaxPortlet. The project structure should looks like below screenshot.

Ajax_In_Portlet_PS

I am goint to demonstrate how to make resource URL call in AUI ajax. You can refer my blog to understand how to create resourceURL and how it works. Add following code in portlet class – TestAjaxPortlet.java

Explanation 

  • I am simply overriding serveResource method. In this method, I am simply passing html content to response.

Add following code in view.jsp

Explanation (little theory about AUI Ajax)

  • In this JSP, resource URL is called in ajax. However you can also call action URL or render URL in ajax.
  • portlet:resourceURL is a tag to construct resource URL. var attribute of this tag holds the generated resource URL.
  • I have created java script function called ajaxCall() in which I am making ajax call.
  • Liferay (version 6.1 & 6.2) ships with java script framework called AUI (AlloyUI). starting from liferay 7, it uses JQuery out of the box.
  • I used AUI to make ajax call. AUI is a modular framework. To use the specific functionality, you need to register appropriate modules. For AUI Ajax, you need to register aui-io-request module.
  • AUI().use is used to register modules.
    • The first parameter of AUI().use should be comma separated names of modules which you want to register.
    • Second parameter is a function in which you can write your code. (function(A){…})
  • Actual AUI ajax call is made by A.io.request call. It takes following parameters
    • first parameter is url. I have pass resourceURL created by portlet:resourceURL tag (${testAjaxResourceUrl}).
    • Second parameter is set of configuration settings like
      • method (Post or Get)
      • data (any additional parameter if you would like to pass). Make sure you pass portlet namespace before each parameter which is mandatory starting from liferay 6.2.
      • on: used to define various call back function. I have defined success which will be called on success of AUI ajax call. There are other call back functions like failure, end, completed etc.
      • in success call back function, I am simply showing the result in JS alert.
        • this.get(‘responseData’) will give you ajax call output. In our case it’s output generated in serveResource method.
  • To execute AUI ajax call, I am calling ajaxCall javascript function with onclick event of link.

Save portlet class, view.jsp, deploy the portlet and place it on some page and click on the link and see what is output.

Submit HTML form with AUI  Ajax

In case if you wish to pass html form with aui ajax, you need to change view.jsp code as per below snippet

Explanation

  • I have created one html form with one text box and one button. Please note that, for Input element in this form I have pass portlet namespace(portlet:namespace). Without this, liferay (starting with version 6.2) will not allow to read them in portlet.
  • I have bind ajaxCall() function on click event of button in html form.
  • To pass html form with aui ajax, I have used form attribute of A.io.request object. In form attribute, you need to pass the id of the form which you want to submit with aui ajax.
  • Rest all are same. You can still pass additional parameter with data attribute.

Additional Attributes of A.io.request object

You can see the full details about the attribute of A.io.request object as per below screenshot.

Attributes in A.io.request

A_io_request_attrs

You can observe that we have used few attributes like uri, data, form, method etc. Let’s see how to read the form data in your portlet. you can read each input element with separate request.getParameter call. Update your portlet call as per below snippet.

Explanation

  • I am reading request (form) parameter by ParamUtil.get. Alternatively you can read them by resourceRequest.getParameter but ParamUtil.get provides additional functionality.
  • In response, I am writing the value of request parameter. You can place logs wherever require.

Save the view.jsp and portlet class and build the portlet and refresh the page. This time you will see there is one text box with button. Add some value and click on submit button. Whatever text you added in textbox will be reach to portlet’s serveResource method where you pass it in response. Finally it’s visible in JS alert as per below screenshot.

Ajax_output

You can observe the logs to make sure it calls serveResource() method.

Additional methods of A.io.request object

A_io_request_methods

A.io.request object also supports various methods (as per above list). What you seen so far is  setting attribute values while creating the instance of A.io.request.

AUI allow you to create the instance of A.io.request and then later on set the values of attributes with set method. Let’s see how to do that.

If you wish to just create the object of A.io.request, then you need to write it like

Explanation

  • You can create the instance of A.io.request and assign it to some javascript variable to use it later on.
  • This javascript variable (which holds object of type A.io.request) will be used to set various attribute. For example, form, uri,data, dataType etc.
  • Here, I have set the uri while creating instance of A.io.request but that is not mandatory. You can still create it without uri and then later can set it’s uri by calling set method. (ajaxRequest.set(‘uri’,'<<ACTUAL_URI>>’).
  • The only problem here is this will start ajax call as soon as you create the intance of A.io.request.
  • If you don’t wish to make aui ajax call as soon as you create the object of type A.io.request, then you need to set it’s attribute ‘autoLoad‘ to false while creating it and then later set its other attribute.
  • Finally you need to call start() method to start aui ajax call(ajaxRequest.start()).
  • autoLoad can be set to false as per below snippet

Summing UP

  • Liferay supports aui ajax call with it’s inbuilt java script library – AUI.
  • aui-io-request is the module which provides support for AUI ajax in Liferay.
  • Object of A.io.request is used to make AUI Ajax call in Liferay
  • Starting with liferay 7, making ajax call is very straight forward because it uses JQuery out of the box.

Download Portlet Source – (version Liferay 6.2)

Share This Post

3 Comments - Write a Comment

  1. Hello NiLang,

    Thank you very much for this post, I followed your guide and used it for my application, but I have a question, please give me a suggestion.

    I am using liferay 7, I want to split javascript code into 1 dependent file, I follow the guide by liferay but still not success, can you guide me how to do that?

    followed guide:
    https://dev.liferay.com/fr/develop/tutorials/-/knowledge_base/7-0/using-external-libraries?_ga=2.185018858.2144798864.1505634898-1750868252.1500468673

    Thank you and best regards,
    Hung Tran

    Reply
    1. Hello Hund Tran,

      Gald to know that you are getting help from my blog.. However this topic is also new for me. I will try to look into it and let you know if found any useful. Requesting if you find any solution please do post here.

      Regards
      Nilang

      Reply

Post Comment