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
Hope this will help....
Related Post:-
Spring MVC portlet in Liferay
Form Handling in Spring Portlet
Many To Many Relationship mapping in Liferay Services
Portlet Name space Parameter in liferay
Open/Close AUI Dialog Box in Liferay
Liferay Service Builder in Detail
How to install Maven
Creating Portlet/Services using Maven