How To Use Ajax in Spring Portlet
Today we will discuss how to use Ajax in Spring Portlet. For this we create two select box one for country and second for States. When someone select country Ajax call is generated and dynamically add options in States select box depending on which country is selected.Before reading this blog it is highly recommended to read my previous blog Spring Portlet in Liferay and Form Handling in Spring Portlet .
Lets Start this step by step:-
Step 1:-Create Spring MVC Portlet
For creating a basic Spring MVC portlet you can refer my previous blog Spring MVC Portlet in liferay.
Step 2:-Attach jquery in Portlet
For using jquery open liferay-portlet.xml and in header javascript attach jquery.min.js
Ex-
<header-portlet-javascript>
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
</header-portlet-javascript>
Also put requires-namespaced-parameters is false inside liferay-portlet.xml.
Ex-
<requires-namespaced-parameters>
false
</requires-namespaced-parameters>
Step 3:-Create Ajax in your view.jsp
Open view.jsp and paste this content:-
view.jsp
Explanation:-
1)In line 4 we create a resource Url findState ,this URL is used to create a method in our controller that is using this value as:-
@ResourceMapping(value="findState")
2)In Line 6 to 27 we create our Ajax call that can use URL findState and send the name of country in a parameter countryName. If data return successfully in the form of json we parse the json data and by using for loop append the data in state select box.
Step 3:-Handle the Ajax Call
Open your controller and create a method that is call when Ajax is generated.:-
AjaxController.java
Explanation:-
1)Here we create a method findStateForCountry that is annotated with @ResourceMapping(value="findState") this find state must match with the id of resourceUrl that is created in view.jsp.
2)In method findStateForCountry we create a Json Array and two Json objects and put value in the json object on the basis of India or USA and return the response.In json object we add two property one is id of state and second is name of state.This array is iterated in view.jsp to create state drop down.
Output:-
Project Structure:-
You can download source code from Ajax in Spring Portlet
Hope this will help....
Related Post:-
Spring MVC portlet in Liferay
Form Handling in Spring Portlet
Many To Many Relationship mapping in Liferay Services
Liferay Service Builder in Detail
How to install Maven
Creating Portlet/Services using Maven
is there any chance that we can return the whole jsp in the ajax call.
ReplyDeleteI tried but it is not returning the whole jsp. i am gettig the blank data.
Yup definitely you may include the jsp by using dispatcher or you may visit:-
Deletehttp://liferayiseasy.blogspot.in/2015/04/form-submission-using-ajaxaui-in-liferay.html
Thanks Aditya for replying, Below is the lines of code i have written, but when i hit the url it is returning me blank value. but if write some data via res.getWriter().write("tes"), then the data is returned to the ajax call success method.
ReplyDelete@ResourceMapping(value="testAjax")
public String getDynamicData(final ResourceRequest req,final ResourceResponse res) throws IOException, PortletException{
return "test";
}
In this scenario its better to use generic portlet
Delete@Override
public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, IOException {
PortletRequestDispatcher portletRequestDispatcher = getPortletContext().getRequestDispatcher("/html/demo/test.jsp");
portletRequestDispatcher.include(request, response);
super.serveResource(request, response);
}
Then the whole jsp is send as a response you can append the result to any div
For Spring Portlet use this code:-
Delete@ResourceMapping(value="testAjax")
public void getDynamicData(ResourceRequest request, ResourceResponse response) throws IOException, PortletException {
PortletRequestDispatcher dispatcher = request.getPortletSession().getPortletContext().getRequestDispatcher("/html/ajax/test.jsp");
dispatcher.include(request, response);
}
Hope everything is clear for latest update of blogs you can join the blog
Hi Adithya, Thanks you very much it really helped. i was able to return the jsp.
ReplyDeleteI have joined your blog.
Most welcome
DeleteHi Aditya, Thank for your posting about ajax page rendering. But i faced one issue when i do model.addAttribute("user" new User()); to bind in my jsp page form. It gives below error.
ReplyDeleteNeither BindingResult nor plain target object for bean available as request attribute
Hi Farooq,
DeleteYou may visit
https://www.liferay.com/community/forums/-/message_boards/message/33238404
or you can use json to send data as describe in
http://liferayiseasy.blogspot.in/2015/04/form-submission-using-ajaxaui-in-liferay.html