Recent Bloggers

Ankit Prajapati
Posts: 5
Stars: 0
Date: 9/18/17
Chirag Patel
Posts: 4
Stars: 0
Date: 9/15/17
Rahul Joshi
Posts: 5
Stars: 0
Date: 9/15/17
Jiten Vaghela
Posts: 1
Stars: 0
Date: 8/23/17
Kuldeep Acharya
Posts: 1
Stars: 0
Date: 8/16/17
Saurang Suthar
Posts: 5
Stars: 0
Date: 7/5/17
Jyoti Verma
Posts: 3
Stars: 0
Date: 6/29/17
Pankti Patel
Posts: 1
Stars: 0
Date: 5/27/17
Chandrika Baraiya
Posts: 5
Stars: 0
Date: 5/27/17
Atith Patel
Posts: 5
Stars: 0
Date: 5/23/17
« Back

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:
Comments
No comments yet. Be the first.

Contact Us

Loading

Get in touch

Headquarter :
302, Landmark,
Nr. Titanium City Center,
Prahlad Nagar Road,
Ahmedabad, India - 380015.