Liferay JavaScript Tips

JavaScript plays a vital role in Liferay development. JavaScripts are widely used in portlets and themes. While developing in Liferay sometimes you need JavaScript to submit a portlet page or you need to call process action from your Javascript functions. This article provides some basic JavaScript tips which will be very useful in your day to day Liferay development.

Tips 1: Submit form by JavaScript

You want to call a JavaScript function when a button is clicked. The JavaScript will submit the whole form. Once the form is submitted it should invoke your process action. 

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

<portlet:actionURL name="myProcessAction" var="processURL"/>

<script type="text/javascript">
function submitFm() {
    var url = '<%=processURL.toString()%>';
    document.forms["fm"].action=url;
    document.forms["fm"].submit();
}
</script>

<form name="fm" method="post">
    First Name : <input type="text" name="<portlet:namespace />firstName"/>
    <br/>
    Last Name : <input type="text" name="<portlet:namespace />lastName"/>
    <br/>
    Age : <input type="text" name="<portlet:namespace />age"/>
    <br/>
    <input type="button" value="Submit Form" onclick="submitFm()">
</form>

Process Action:

    @ProcessAction(name="myProcessAction")
    public void process(ActionRequest actionRequest, ActionResponse actionResponse){
        
        String firstName = ParamUtil.getString(actionRequest, "firstName");
        String lastName = ParamUtil.getString(actionRequest, "lastName");
        String age = ParamUtil.getString(actionRequest, "age");
        System.out.println(firstName);
        System.out.println(lastName);
        System.out.println(age);
    }

Note: Look the form fields. Every input fields are prefixed by <portlet:namespace/> . This is mandatory otherwise you will not be able to read form fields in your process action.

 Tips 2: Call only process action when a button is clicked Sometimes you don’t want to submit the whole form by JavaScript function. You want to call only process action.

<portlet:actionURL name="myProcessAction" var="processURL"/>

<script type="text/javascript">
function callProcessAction(url) {
    window.location.href = url;
}
</script>

<input type="button" value="Call Process Action" onclick="callProcessAction('<%=processURL.toString()%>')">

The above code will call the respective process action. But how to pass parameter to the process action? Here is the way

<portlet:actionURL name="myProcessAction" var="processURL"/>

<script type="text/javascript">
function callProcessAction(url) {
    window.location.href = url+"&site=www.proliferay.com";
}
</script>

<input type="button" value="Call Process Action" onclick="callProcessAction('<%=processURL.toString()%>')">  

Here we are sending parameter site to the process action. You might be thinking you can read this parameter inside your process action like

ParamUtil.getString(actionRequest, “site”); // You can not read like this

We can read the parameter as below

    @ProcessAction(name="myProcessAction")
    public void process(ActionRequest actionRequest, ActionResponse actionResponse){
        HttpServletRequest request = PortalUtil.getHttpServletRequest(actionRequest);
        String site = PortalUtil.getOriginalServletRequest(request).getParameter("site");
        System.out.println("Reading parameter sent by javascript");
        System.out.println("Site:::::"+site);
    }

 Tips 3: Call Serve Resource method as simple ajax call without using any framework

<portlet:resourceURL var="resourceURL"/>
<script type="text/javascript">
function callResource(url) {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    
}
</script>

<input type="button" value="Ajax Call" onclick="callResource('<%=resourceURL.toString()%>')">  

Note: In  xmlhttp.open(“GET”,url,true) the first parameter is http method, second is the url that you need to invoke as ajax and third parameter is true means its an Ajax call. If its false then its not an ajax call.

 Send Some parameters to the ajax call:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<portlet:defineObjects />
<portlet:resourceURL var="resourceURL"/>
<script type="text/javascript">
function callResource(url) {
    url = url + "&<portlet:namespace/>fname=John&<portlet:namespace/>lname=Abraham";
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    
}
</script>

<input type="button" value="Ajax Call" onclick="callResource('<%=resourceURL.toString()%>')">  

Note: We are sending two parameters in the ajax call. One is fname and another is laname. Read those parameter in serve resource method as usual.

Call Back Function:

After Ajax call you need some way to get server response. onreadystatechange is the function where we can get many information during Ajax call.

We can use it this way

<script type="text/javascript">
function callResource(url) {
    url = url + "&<portlet:namespace/>fname=John&<portlet:namespace/>lname=Abraham";
    var xmlhttp=new XMLHttpRequest();
    
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        // Code goes here
        //xmlhttp.responseText
        }
      }
    
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    
}
</script>

Note: Render URL is not discussed here. It can be used as same way as process action URL.