jQuery UI with Liferay 7

If you want to integrate liferay 7 theme/portlet/application with jQuery UI, you need to make subtle change in jQuery UI library itself.

By default library starts with -

(function( factory ) {
 if ( typeof define === "function" && define.amd ) {

  // AMD. Register as an anonymous module.
  define([ "jquery" ], factory );
 } else {

  // Browser globals
  factory( jQuery );
 }
}(function( $ ) {

If you add library directly in your liferay application, you will be getting an error - Mismatched anonymous define() module:

To overcome this issue, you need to change the library like

(function( factory ) {
 
  factory( jQuery );
 
}(function( $ ) {

What you are doing is removing the reference of define call, which causes the issue, as jQuery is already loaded by default.
Same thing you need to perform for other JS libraries which contains the call.


You are just done, Try & Enjoy the function.............:)

3 ways to use serve resource in portal

JSR-286 introduced resource serving and the same method can perform AJAX requests as well.
It's a  long time but I am just describing here with code snippets all you can do with resource method.

This example works with Liferay 7.

There are three ways you can use resource method from your portlet.
We will be looking at these with code snippets

• You can download a file
• You can fetch piece of data
• You can return a jsp/ftl...

1) Download File

Create a hyperlink and create resource url(Same step needs to be done for all calls)

<portlet:resourceURL var="downloadURL" />

<a href="<%=downloadURL%>">Download Users</a>

Method in your portlet class

public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse)
   throws IOException, PortletException {
   resourceResponse.setContentType("text/csv");
   resourceResponse.addProperty(HttpHeaders.CONTENT_DISPOSITION,

      "attachment;filename=sample.csv");
   OutputStream out = resourceResponse.getPortletOutputStream();
   String names = "Vipin , Bardia";
   
   InputStream in = new ByteArrayInputStream(names.getBytes());
   IOUtils.copy(in, out);
   
   out.flush();
}

2) Fetch dynamic data

Javascript call

jQuery(".htmlButton").click(function() {
      jQuery.ajax({
          url:$("#resource_url").val(),
          success: function(data)
          {
              jQuery('#result').html(data);
          }
  });
 });

Method in your portlet class

public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse)
   throws IOException, PortletException {
        resourceResponse.getWriter().write("I am sending my name : Vipin Bardia");
}

3) Return the jsp in AJAX call

Javascript call

Same javascript call as we used in example 2 to fetch dynamic data.

Method in your portlet class

public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse)
   throws IOException, PortletException {
        include("/MYAJAX.jsp", resourceRequest, resourceResponse);
}

You are just done, Try & Enjoy the function.............:)