Alloy UI AJAX with Liferay

blog-banner

Nowadays AJAX is used widely in web applications. It is a front-end technology that lets a script written on front-end, communicate with server without whole page refresh.

Alloy UI provides a plugin to use AJAX in web applications. AUI provides Ajax in aui-io-request module. Signature for aui-io-request is like below:

AUI().use('aui-base','aui-io-request', function(A){
    // Ajax operations are written h
});

Prerequisite: Knowledge of Spring MVC Liferay portlet is required to understand this blog.

I am going to show how to use AUI ‘aui-io-request’ for AJAX in a Spring MVC Liferay portlet.

I am going to create a JSP page with AUI form and submit data of form to a controller using Alloy UI AJAX. I am also going to show a way of sending data back to script on the page from the controller in JSON format.

Step:1 - Create AUI form in jsp page:

<aui:form>
	<aui:input type="text" name="Name" id="studentName"/>
	<aui:input type="text" name="Email" id="studentEmail"/>
	<aui:input type="text" name="ContactNo" id="studentPhone"/>
	<aui:button type="button" name="saveButton" value="Save" onclick="save();"/>
</aui:form>

Step:2 - Create resourceURL:

<portlet:resourceURL var="saveData" id="saveData" ></portlet:resourceURL>

Step:3 - Add AUI script to perform AJAX operations:

<aui:script>
function save(){
    AUI().use('aui-base','aui-io-request', function(A){
       
        var name=A.one("#<portlet:namespace />studentName").get('value');
        var email=A.one("#<portlet:namespace />studentEmail").get('value');
        var contact=A.one("#<portlet:namespace />studentPhone").get('value');
       
         A.io.request('<%=saveData%>',{
             dataType: 'json',
             method: 'POST',
             data: { <portlet:namespace/>name: name,
                      <portlet:namespace/>email: email,
                      <portlet:namespace/>contact: contact},
             on: {
             success: function() {
                 var data=this.get('responseData');
                 // Actions to be performed on success
                 }
             }
         });
    });
}
</aui:script>

Step:4 - Write a resource method to handle AJAX request:

@ResourceMapping(value="saveData")
public void saveData(ResourceRequest resourceRequest,ResourceResponse resourceResponse,Model model){
        String name = resourceRequest.getParameter("name");
        String emailId = resourceRequest.getParameter("email");
        String contact = resourceRequest.getParameter("contact");
 }

After receiving data in a Java class, any database CRUD operations can be performed using that data.

Step:5 - Return data in JSON format from resource method to front-end:

JSONObject obj =  JSONFactoryUtil.createJSONObject();
obj.put("message","Data Received Successfully");
PrintWriter out=resourceResponse.getWriter();
out.print(obj.toString());

Step:6 - Receive  response data on success in script:

on: {
success: function() {
var data=this.get('responseData');
           var msg = data.message;
             alert(msg);
       }
}

Given example is for ‘POST’ method.

The Same signature can be used for ‘GET’ method that returns JSON data to front-end. (e.g. Content Auto updation)

Download:

Distribution File(WAR)

Contact us

For Your Business Requirements

Text to Identify Refresh CAPTCHA
Background Image Close Button

2 - 4 October 2024

Hall: 10, Booth: #B8 Brussels, Belgium