Sunday, March 15, 2015

Ajax Call in Spring MVC Portlet

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








9 comments:

  1. is there any chance that we can return the whole jsp in the ajax call.
    I tried but it is not returning the whole jsp. i am gettig the blank data.

    ReplyDelete
    Replies
    1. Yup definitely you may include the jsp by using dispatcher or you may visit:-
      http://liferayiseasy.blogspot.in/2015/04/form-submission-using-ajaxaui-in-liferay.html

      Delete
  2. 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.

    @ResourceMapping(value="testAjax")
    public String getDynamicData(final ResourceRequest req,final ResourceResponse res) throws IOException, PortletException{
    return "test";
    }

    ReplyDelete
    Replies
    1. In this scenario its better to use generic portlet

      @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

      Delete
    2. For Spring Portlet use this code:-

      @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

      Delete
  3. Hi Adithya, Thanks you very much it really helped. i was able to return the jsp.
    I have joined your blog.

    ReplyDelete
  4. Hi 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.

    Neither BindingResult nor plain target object for bean available as request attribute

    ReplyDelete
    Replies
    1. Hi Farooq,

      You 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

      Delete

Total Pageviews

Number Of Unique Visitor

Free counters!