Ajax using Alloy UI in Liferay Example 1

In this example we are going to learn, how to get user detail by passing email id using ajax.


Step 1: Create one portlet plugin project , portlet name in this example ajaxExamples, inside this portlet plugin project create one portlet
name alloyajax

Step 2 : Paste below code in portlet view.jsp

 

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

<p style="color:green;"> Ajax using Alloy UI in Liferay</p>


<portlet:resourceURL var="saveDataUrl"/>



<div style="border:1px solid red; color:green;" id="<portlet:namespace/>contentview"></div>

<aui:form>
          <aui:input type="text" name="Email" id="EMAIL"/>
          <aui:button type="button" name="saveButton"  value="Ajax Test" onclick="save();" />
</aui:form>




 <aui:script>
function save(){
    AUI().use('aui-base','aui-io-request', function(A){
       
        var email=A.one("#<portlet:namespace />EMAIL").get('value');
        
        A.io.request('<%=saveDataUrl%>',{
            dataType: 'json',
            method: 'POST',
            data: { <portlet:namespace/>email: email},
            on: {
            success: function() {
                var data=this.get('responseData');
                // Actions to be performed on success
                var UserFullName = data.userFullName;
                alert("User Full Name: "+UserFullName);
                AUI().one('#<portlet:namespace/>contentview').html(UserFullName);
                }
            }
        });
   
    });
}
</aui:script>

EXPLANATION : In above code we are getting email value from form field in ajax and calling resource url and sending to controller.

Step 3 : Paste below code in portlet controller class AlloyAjax.java

package com.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.portlet.PortletException;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;

import com.liferay.portal.kernel.exception.PortalException;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
import com.liferay.portal.kernel.util.WebKeys;
import com.liferay.portal.model.User;
import com.liferay.portal.service.UserLocalServiceUtil;
import com.liferay.portal.theme.ThemeDisplay;
import com.liferay.util.bridges.mvc.MVCPortlet;

/**
 * Portlet implementation class AlloyAjax
 */
public class AlloyAjax extends MVCPortlet {

@Override
public void serveResource(ResourceRequest resourceRequest,
        ResourceResponse resourceResponse) throws IOException,
        PortletException {
    
    System.out.println("inside resource method for testing ajax call using resource url");
    
     String emailId = resourceRequest.getParameter("email");
     
     
     ThemeDisplay themeDisplay = (ThemeDisplay)resourceRequest.getAttribute(WebKeys.THEME_DISPLAY);
     JSONObject jsonobj =  JSONFactoryUtil.createJSONObject();

     User user = null;
    try {
         user = UserLocalServiceUtil.getUserByEmailAddress(themeDisplay.getCompanyId(), emailId);
        
    
        
    } catch (PortalException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SystemException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    if(user != null){
         jsonobj.put("userFullName", user.getFullName());
    } else {
        
        System.out.println("user not found for this email...");
    }
    

     PrintWriter printout=resourceResponse.getWriter();
     printout.print(jsonobj.toString());
    
    
    
}
    
    
}

EXPLANATION: In above code we are getting user email address from resource url, which we are sending from portlet view.jsp
and with email we are calling user detail and sending back as response using json object and after getting response we are
replacing one html field with response object value using html id.







Output :