• Liferay JavaScript Tips

    Posted on November 9, 2014 by Hamidul Islam in Liferay.

     

    JavaScript tips for liferay


    aim

    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. 

    Submit Form

    <%@ 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

    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 Call Process ActionSometimes 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

    Ajax Call

    <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.

    Ajax Status

    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.

    Post Tagged with ,

One Response so far.

  1. rakesh kumar says:

    i want to use java script in theme,when i click on tabs in navigation bar ,page should not refresh.how to do this??

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close