Portlet Application Using JQuery/Ajax

In  JSP :

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<portlet:defineObjects />

This is the <b>AjaxApp</b> portlet in View mode.

<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>

<aui:form>

                <aui:input name="name" label="name" id="name"></aui:input>

                <aui:button name="getData" value="Get Details" id="getData"></aui:button>

</aui:form>

<div id="a1"></div>

<div id="a2"></div>

<div id="a3"></div>

<portlet:resourceURL var="resourceURL"></portlet:resourceURL>

<script type="text/javascript">

$("#<portlet:namespace/>getData").click(function() {

                var nameVal = jQuery("#<portlet:namespace/>name").val();

                 alert('hi'+nameVal);

                 jQuery.ajax({

                                    url :'<%=resourceURL%>',           

                                    data: {name:nameVal},

                                    type: "POST",

                                    dataType: "json",

                                    success: function(data) {             

                                               

                                       // $("#a1").html(data);

                                      

                                                document.getElementById("a1").innerHTML="<font color=green>Name :</font>"+data["Name"];

                                                document.getElementById("a2").innerHTML="<font color=green>Qualification </font>"+data["Qualification"];

                                                document.getElementById("a3").innerHTML="<font color=green>University </font> "+data["University "];

                                               

                                  }

                                });

                });

</script>

IN MVCPortlet We need do following :

               

Note 2:If we want work with static data then directly we can do according to your requirement.

             

Note 1:If we want get data from service builder then go finder method and collect data store it in JSON Object.

Ex:

public void serveResource(

                                ResourceRequest resourceRequest, ResourceResponse resourceResponse)

                throws IOException, PortletException {

                try{

                System.out.println("JSON Ajax Call....");

               

                String name=ParamUtil.getString(resourceRequest, "name");

                System.out.println("Name  -----"+name);

                PrintWriter writer = resourceResponse.getWriter();

      

            List<account> names=accountLocalServiceUtil.findCources(name);

                                     

                                   System.out.println("......"+names);

                                   JSONObject objJsonObject = JSONFactoryUtil.createJSONObject();

                                   for(account a:names)

                                   {

                                                 

                                                   objJsonObject.put("Name",a.getName());

                                                   objJsonObject.put("Qualification",a.getQualification());

                                                   objJsonObject.put("University ",a.getUniversity());

                               

                                   }

                                  

                                  writer.print(objJsonObject);

               

                               

                                 

                }

                catch (Exception e) {

                                                                // TODO: handle exception

                                System.out.println("---"+e);

                                                }                                 

               

           }

Summary :

1. Create one jsp write Ajax and jQuery Related code for Ajax Calls

2. Handling to display JSON Data on browser

3.In MVC Portlet override serveResourec(Req,Res) method and writte ralated processing logic

ex: OurPortlert extends MVCPortlet

{

 public void serveResource(ResoueceRequest,ResourceResponce)throws IOEx,PortletEx

{

ResourceResponce.getWriter.print("JSON Object");

}

}