Ajax call using Alloy UI in Liferay Part I

In this example we will show how liferay serveResource method will be called using resource url and Alloy A.io.request method 
using Ajax call.

Example 1 : Ajax call with minimum code.

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 : In portlet view.jsp paste below code

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

<aui:form>
          <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){
     
        //simply passing resource url
         A.io.request('<%=saveDataUrl.toString()%>');
    });
}
</aui:script>

Explanation : In this code i have created one resourceUrl , one simple form with only submit button , and AUI script.
Inside function i have just passed resource url to call serveResource method in java controller.

Step 3 : Paste below code in portlet java 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.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
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");
   
}   
}

Explanation : In above code , i have written serveResource method and by printing simple message checking request is coming or not.


OutPut: