Ajax through AUI

We can handle ajax call through AUI.
Below is the simplest example to achieve this -

<portlet:renderURL var="addEntityURL">
       <portlet:param name="jspPage" value="/html/custom/add_entity.jsp"/>
</portlet:renderURL>

<aui:button-row id="<portlet:namespace />custom-button-row">
      <aui:script use="aui-button-item">
            var buttonRow = A.one("#<portlet:namespace />custom-button-row");
            var buttonLabel = "<liferay-ui:message key="add" />";
           
            var contentPane = A.one("#<portlet:namespace/>show-content");
          
            contentPane.plug(A.Plugin.IO, {
                        uri: '<%=addEntityURL.toString()%>',
                        autoLoad: false
            });
          
            var button = new A.ButtonItem({
                icon: 'plusthick',
                label: buttonLabel,
                handler: function(event) {
                    contentPane.io.start();
                }
            }).render(buttonRow);
        </aui:script>
</aui:button-row>

<div id="<portlet:namespace />show-content" >
         This is the simple text that will be replaced via ajax through AUI
</div>

AUI Events

Events can easily be handled through simple AUI methods.

e.g. we can bind an event to a button to navigate to a different page simply through AUI.

<portlet:renderURL var="addEntityURL">
       <portlet:param name="jspPage" value="/html/custom/add_entity.jsp"/>
</portlet:renderURL>

<aui:button-row id="<portlet:namespace />custom-button-row">
      <aui:script use="aui-button-item">
            var buttonRow = A.one("#<portlet:namespace />custom-button-row");
            var buttonLabel = "<liferay-ui:message key="add" />";
           
            new A.ButtonItem({
                icon: 'plusthick',
                label: buttonLabel,
                handler: function(event) {
                    location.href =  "<%=addEntityURL%>";
                }
            }).render(buttonRow);
        </aui:script>
</aui:button-row>

In this way we have achieved navigation though AUI event binding.
Some more complex things, depending on the complexity, could also be achieved using this.

Searching users with keywords by using UserLocalServiceUtil's search method

This method will search the users on the basis of keywords entered.
These keywords (space separated) may occur in the user's first name, middle name, last name, screen name, or email address .

First of all you have to create a simple input text field in your jsp.

Also, create a simple renderURL to navigate to the search-users jsp with the entered keywords.

In some jsp e.g. view.jsp :

<portlet:renderURL var="searchURL">
    <portlet:param name="jspPage" value="/html/search-users.jsp" />
</portlet:renderURL>

<aui:form name="searchForm" action="<%=searchURL%>" method="post">
        <aui:input  name="keywords" label="Enter any keyword related to user you wish to search"/>
        <aui:button type="submit" value="Search" />
</aui:form>

In search-users.jsp :

Here we will be using search container to show the results of the searched user(if found).
Results of the search container would be the list we get from search method of UserLocalServiceUtil which also include our parameter "keywords" which we will be getting from the request.
Total would be the total count of the list.

<%       
        String keywords = ParamUtil.getString(request, "keywords");
        PortletURL renderURL = renderResponse.createRenderURL();
        renderURL.setParameter("jspPage", "/html/search-users.jsp");
        // here we have created renderURL just to remain on the current jsp page after the pagination.
%>
   
<liferay-ui:search-container  iteratorURL="<%= renderURL %>" emptyResultsMessage="there-are-no-records" delta="5">
   
    <liferay-ui:search-container-results>
       
        <%   
                LinkedHashMap<String, Object> userParams = new LinkedHashMap<String, Object>();
                       
                List<User> list = UserLocalServiceUtil.search(
                company.getCompanyId(), keywords, true, userParams,
                searchContainer.getStart(), searchContainer.getEnd(),
                (OrderByComparator) null);
       
                total = UserLocalServiceUtil.searchCount(
                company.getCompanyId(), keywords, true,  userParams);
                pageContext.setAttribute("results", list);
                pageContext.setAttribute("total", total);
        %>
         
    </liferay-ui:search-container-results>
   
    <liferay-ui:search-container-row className="com.liferay.portal.model.User" modelVar="record">
           
            <liferay-ui:search-container-column-text name="User Id" property="userId" />
            <liferay-ui:search-container-column-text name="First Name" property="firstName" />
            <liferay-ui:search-container-column-text name="LastName" property="lastName" />
            // any other information you want to display
    </liferay-ui:search-container-row>
   
    <liferay-ui:search-iterator />
   
</liferay-ui:search-container>


Note: Please do import the required classes at the top of your jsp page.
like :
<%@ page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@ page import="javax.portlet.PortletURL"%>
<%@ page import="com.liferay.portal.kernel.util.OrderByComparator"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.LinkedHashMap"%>
<%@ page import="com.liferay.portal.model.User"%>
<%@ page import="com.liferay.portal.service.UserLocalServiceUtil"%>

Creating Portlet URLs(renderURL/actionURL/resourceURL) in Liferay through jsp and javascript

Here I am creating renderURL only.Other URL's can be created in the similar way

 In JSP :

<portlet:renderURL var="renderURL ">
    <portlet:param name="param-name" value="param-value" />
    <portlet:param name="param-name" value="param-value" />
</portlet:renderURL>


OR

 <%
           PortletURL renderURL = renderResponse.createRenderURL();
           renderURL.setParameter("param-name", "param-value");
           renderURL.setParameter("param-name", "param-value");
%>

In the above example param-name could be "jspPage" and param-value could be "/html/edit.jsp" if you want to navigate from current jsp page to some other jsp page (in this case edit.jsp) . We can set other parameters also as per our requirements.


Inside your javascript :

<script type="text/javascript">

function createRenderURL() {
    AUI().ready('liferay-portlet-url', function(A) {
        var renderURL = Liferay.PortletURL.createRenderURL();
        renderURL .setParameter("param-name","param-value");
        renderURL .setPortletId("your-unique-portlet-id");
        renderURL .setPortletMode("view");
        renderURL .setWindowState("normal");
        // i.e. your-unique-portlet-id can be like "helloworld_WAR_helloworldportlet"
    });
}
</script>

Note: Key point here is to set PortletId which is mandatory or else it would not be able to recognize the correct URL.