Liferay is easy: Form Submission Using AJAX(AUI) in Liferay

Form Submission Using AJAX(AUI)

Today we will discuss how to Submit a form using Ajax .For sending Ajax request we are using Alloy UI (aui) tags.Then finally Print the form data to Success page.The important thing is when we use Ajax the response is come back in Json(or Xml) form then how we redirect to Success page?
For achieving this we send another request from Ajax success part by using Java Script.So Lets start step by step:-

Step 1:-Create Liferay project and Change view.jsp
Create a liferay project and then create a Generic portlet in it.Open view.jsp and paste the content

view.jsp

Explanation:-
1) In line (32-36) we create a simple form in which on click of submit button submitForm() is called.
2)Inside submitForm() we send a Ajax call in which we are using id of form for sending data (Name,Password)of form to Controller.
3)On success we parse the Json Data send by controller and then send another render Request by using java script (window.location.href) and appending the data in URL so that we can display on Success page.

Step 2:-Create Your controller
Inside your controller paste this content:-

Demo.java

Explanation:-
1)Ajax Call comes to serveResource() here we fetch the form data and put in Json object and send back the response.
2)On Success part of Ajax (line 23 of view.jsp) we send another render Request by using window.location.href and append parameters.This call comes to doView().
3)Inside doView() we check the parameter(path) that is passed in render Request:-

<portlet:renderURL var="succcessURL">
<portlet:param name="path" value="success"/>
</portlet:renderURL>

if path is success the we get the parameters and set in attributes so that they are available in success.jsp.After that we include success.jsp.(line 28-33) .

Step 3:-Create success.jsp
Just paste this content to success.jsp:-

success.jsp
Step 4:-Change Required name space
We are using simple form so we have to change required namespace parameter to false inside liferay-portlet.xml.For detail explanation on this you may refer my previous blog Portlet Name Space in liferay.

<requires-namespaced-parameters>
false
</requires-namespaced-parameters>

That's it.

You can download source code from Form Submittion By Ajax