We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

« Back to Blogs

Alloy UI AJAX with Liferay

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 here
});
 
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:
contact-us Request a callback WhatsApp