Ajax In Liferay DXP [Ajax with jQuery in Liferay 7]

 Hi All,

Greetings of the day!

Today we will learn how to integrate jQuery in Liferay DXP and will also develop examples for the same.

Below is what we will achieve at the end of the example.

After entering the pin code and clicking on Fetch Address we will add an ajax call and fetch state and city as shown below.

So let's start.

First, create an MVC portlet StudentMgt, if you need any help on this please refer to my post Create liferay mvc portlet.

Below is the project structure for reference.

Now create Address.java class under respective package shown above,

package com.demo.student.mgt.model; public class Address { private long pinCode; private String state; private String city; public Address(long pinCode, String state, String city) { this.city=city; this.pinCode=pinCode; this.state=state; } public Address() { } //Generate getter setter }

Currently, we are not integrating our portlet with the database we will create a Util class with static data for the current example.So create StudentUtil.java

package com.demo.student.mgt.util; import com.demo.student.mgt.model.Address; import java.util.ArrayList; import java.util.List; import java.util.Optional; public class StudentUtil { public static List<Address> addresses=new ArrayList<Address>(); static { Address add1=new Address(380032,"Gujarat","Surat"); Address add2=new Address(380002,"Maharashtra","Mumbai"); addresses.add(add1); addresses.add(add2); } public static Optional<Address> getAddressByPincode(long pinCode) { return addresses.stream().filter(x->x.getPinCode()==pinCode).findAny(); } }

Now let's add serverResourse method in the Portlet class which will handle ajax calls, here we will fetch the received pin code pass in ajax code from jquery.

After we receive the pin code, we will call over util class to find the address based on the pin code, you can integrate the database by using service builder, if you need guidance on service builder and retrieving data from the database refer to my posts Service Builder In Liferay DXP & CRUD in Liferay DXP.

So below is serverResourse method for reference

package com.demo.student.mgt.portlet; import com.demo.student.mgt.constants.StudentMgtPortletKeys; import com.demo.student.mgt.model.Address; import com.demo.student.mgt.util.StudentUtil; import com.liferay.portal.kernel.json.JSONFactoryUtil; import com.liferay.portal.kernel.json.JSONObject; import com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet; import com.liferay.portal.kernel.util.ParamUtil; import java.io.IOException; import java.util.Optional; import javax.portlet.Portlet; import javax.portlet.PortletException; import javax.portlet.ResourceRequest; import javax.portlet.ResourceResponse; import org.osgi.service.component.annotations.Component; @Component( immediate = true, property = { "com.liferay.portlet.display-category=category.sample", "com.liferay.portlet.header-portlet-css=/css/main.css", "com.liferay.portlet.instanceable=true", "javax.portlet.display-name=StudentMgt", "javax.portlet.init-param.template-path=/", "javax.portlet.init-param.view-template=/view.jsp", "javax.portlet.name=" + StudentMgtPortletKeys.STUDENTMGT, "javax.portlet.resource-bundle=content.Language", "javax.portlet.security-role-ref=power-user,user", "com.liferay.portlet.requires-namespaced-parameters=false" }, service = Portlet.class ) public class StudentMgtPortlet extends MVCPortlet { @Override public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException { long pinCode=ParamUtil.getLong(resourceRequest,"pinCode"); Optional<Address> address=StudentUtil.getAddressByPincode(pinCode); JSONObject jsonObject=new JSONFactoryUtil().createJSONObject(); if(address.isPresent()) { jsonObject.put("pinCode",address.get().getPinCode()); jsonObject.put("state",address.get().getState()); jsonObject.put("city",address.get().getCity()); } resourceResponse.getWriter().print(jsonObject.toJSONString()); super.serveResource(resourceRequest, resourceResponse); } }

Now the final step is to create portlet:resourceURL in our view.jsp and add Html code to generate fields. Also we are including jquery js and other jquery code in view.jsp [You can create js file in META-INF/resources/js folder and add  ajax code and include it in jsp ]

<%@ include file="init.jsp" %> <portlet:resourceURL var="addressURL" ></portlet:resourceURL> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#addressButton").submit(function(e){ e.preventDefault(); }); $("#addressButton").click(function(e){ var pinCode = $("#pinCode").val(); $.ajax({ type: "POST", url: "${addressURL}", data:{ pinCode:pinCode, }, dataType: "json", success: function(data) { $('#state').val(data.state); $('#city').val(data.city); }, //If there was no resonse from the server error: function(jqXHR, textStatus, errorThrown){ console.log("Something thing went wrong please try again " + textStatus); } }); }); }); </script> </head> <body> <p> <b><liferay-ui:message key="studentmgt.caption"/></b> </p> <input type="number" name="pinCode" id="pinCode"> <input type="text" name="state" id="state" disabled="disabled" value=""> <input type="text" name="city" id="city" disabled="disabled" value=""> <input type="button" name="addressButton" id="addressButton" value="FetchAddress"> </body> </html>

Now we have completed our code, just build and deploy the portlet after that place the portlet on some page and use it.

If you have any questions please feel free to ask.

Another related post 

CRUD Using Ajax jQuery In Liferay DXP  

If you need help in deploying portlet in Liferay dxp refer to my post Deploy portlet in liferay dxp 

For Spring boot, Spring microservices, Spring MVC, Spring Batch, Hibernate refer 

Spring Tutorial

For Java - Java 8 refer to Java Tutorial

Backlink To Festival Images

Thank You

Happy Leaning.