Pagination Using JQuery dataTable in Liferay

Some times we will get the requirement to develop the pagination with better UI which can not be achievable using Liferay Search Container.for those requirement below example will be help to develop the pagination using JQuery.

Imports rquired for pagination :- 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/2/dataTables.bootstrap.js"></script>

Html Code :-

<table class="table table-striped error" id="viewDataTables">
<thead>
<tr>
<th><liferay-ui:message key="no" /></th>
<th><liferay-ui:message key="name" /></th>
</tr>
</thead>

        <tbody>
                <tr>
<td><liferay-ui:message key="123" /></td>
<td><liferay-ui:message key="Imthiyaz" /></td>
</tr>
        </tbody>
 </table>

Note :- Here <thead> , <tbody> declaration is mandatory without these pagination will not work .

Script Code :- 

 <script type="text/javascript">

 $('#viewDataTables').dataTable({
     "bFilter" : false,
        "bLengthChange" : false,
        "iDisplayLength" : 10,
        "bSort" : true,
        "sDom" : 't <p> <"bottom"><"clear">'
    
});

 </script>  

Get Drop Down Value in Java Script Function in Liferay

Sometimes we will face an issue to read the drop down values in java script function, then the below code may be use full.

Note :- In chrome browser onclick function will not work.

<aui:select name="selectvideo" id="selectvideo1" label="Select Video" onChange="getPrice()">
          <aui:option value="-1" >
                  <liferay-ui:message key="select-video" />
              </aui:option>


<script>
function getPrice() {
var sel = document.getElementById("<portlet:namespace/>selectvideo1");
document.getElementById("<portlet:namespace/>key").value = sel.options[sel.selectedIndex].value;
}
</script>

Call Action URL using javascript function in Liferay

Sometimes we will get a requirement that we need to hit the "Action URL" using java script function.
May be my blog will be help you fot that requirement.

   <%
           PortletURL actionURL = renderResponse.createActionURL();
           actionURL.setParameter(ActionRequest.ACTION_NAME, "getPrice");
    %>
// creating action URL which will hit the Action method called "getPrice".

<aui:form name="fm" method="POST" >

<aui:input type="text" name="price" label=""  required="true"  onclick="getPrice()" inlineLabel="true">
                                    <aui:validator name="number"></aui:validator>
                                </aui:input>

<aui:button-row>
                    <aui:button type="submit" for="Submit" key="submit" value="Submit"/>                 </aui:button-row>
</aui:form>

// I have created one form with one text field  when i click that field i need to call getPrice action URL

<script>
        function getPrice() {
            document.<portlet:namespace/>fm.action = '<%=actionURL.toString()%>';
            document.<portlet:namespace/>fm.submit();
        }
    </script>

// The above javascript code is usefull  to hit the aciton URL with javascript function without clicking the submit button through javascript we are clicking the submit button.

Hope this is helpfull for you

Properties Entry while working with Ajax calls in Liferay

Some times Ajax call will not work properly in liferay,  when you are passing parameters you will face some issues like not able to pass the values through Ajax call then add the following tags in liferay-portlet.xml
<requires-namespaced-parameters>false</requires-namespaced-parameters>
  <ajaxable>true</ajaxable>

Liferay ER Diagram

Auto complete using Ajax Call Using in Liferay

some times we will have a requirement of auto-complete feature like google search, 

ex:- when ever you search for the particular employee name you need to fetch all employee names which will match or start with the particular character or word. The below code will help you to achieve that requirement.


jsp code :-

//created the resource URL to hit the serveResource method.

<portlet:resourceURL var="getEmployeeNames"/>

// Input field where you need to enter the characters of employee name for example

<aui:input id="myInputNode" name="myInputNode" label="ms-std-rep" helpMessage="Type MS Standard Name in Input Box"/>

// script code to perform auto complete feature.

<script type="text/javascript">

 AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
    A.io.request('<%=getEmployeeNames%>',{
            dataType: 'json',
            method: 'GET',
            on: {
                success: function() {
                new A.AutoCompleteList(
                {
                allowBrowserAutocomplete: 'true',
                activateFirstItem: 'true',
                inputNode: '#myInputNode',
                resultTextLocator: 'result',
                resultHighlighter:['phraseMatch'],
                resultFilters:['phraseMatch'],
                render: 'true',
                source:this.get('responseData'),
                });
    }}
    }); 
    });
</script>

Note :-
we can get the values in different ways of matching scenarios depending upon the value given to the " resultFilters "

charMatch: gives the results that contain all of the individual characters in the query, in any order (not necessarily consecutive).

phraseMatch: gives the results that contain the complete query as a phrase.

startsWith: gives the results that start with the complete query as a phrase.

subWordMatch: gives the results in which all the words of the query match either whole words or parts of words in the result. Non-word characters like whitespace and certain punctuation are ignored.

wordMatch: gives the results that contain all the individual words in the query, in any order (not necessarily consecutive).

ex:-

 resultFilters: ['charMatch', 'wordMatch']

java code :- This code should be write in the Action class of your portlet.

import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

import com.liferay.portal.kernel.json.JSONArray;
import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;

import com.liferay.portal.kernel.log.Log;
import com.liferay.portal.kernel.log.LogFactoryUtil;

import java.io.PrintWriter;


@Override
    public void serveResource(ResourceRequest resourceRequest, ResourceResponse
            resourceResponse) throws IOException, PortletException {
        _log.info("Starting of Serve Resource Method");
        getResults(resourceRequest,resourceResponse);
        _log.info("Exit of Serve Resource Method");
    }

public void getResults(ResourceRequest resourceRequest, ResourceResponse resourceResponse) {
           PrintWriter out;
        JSONArray usersJSONArray = JSONFactoryUtil.createJSONArray();
        JSONObject userJSON=null;
        String mystring = StringPool.BLANK;
        try {
            List  list=MLocalServiceUtil.getM(0,MLocalServiceUtil.getMCount());
            for(M mobj:list){
                  mystring= "result values"; // values which you need to pass to jsp ex: mobj.usernmae                        userJSON=JSONFactoryUtil.createJSONObject();
                    userJSON.put("result",mystring);
                    usersJSONArray.put(userJSON);
                }
            out = resourceResponse.getWriter();
            out.println(usersJSONArray.toString());
        }
        catch (SystemException e) {
                    }
        catch (IOException e) {
                   }
          }

Journal Article in template file / vm file Liferay

If we want to fetch the journal article of web content details in template file then the following code will be usefull.

The following code will shows the tag based journal Article content in template.

  
#set($assetTag =$serviceLocator.findService('com.liferay.portlet.asset.service.AssetTagLocalService'))
#set($assetEntryService =$serviceLocator.findService('com.liferay.portlet.asset.service.AssetEntryLocalService'))
#set($journalArticleResourceLocal=$serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleResourceLocalService'))
#set($journalArticleLocal=$serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleLocalService'))
#set($journalContentUtil =$utilLocator.findUtil('com.liferay.portlet.journalcontent.util.JournalContent'))
#set($groupId = $getterUtil.getLong($groupId))
#set($languageId = $request.theme-display.language-id)

#set($assetTagObj=$assetTag.getTag($groupId,"myTag"))
    #set($assetId = $assetTagObj.getTagId())
    #set($assestList= $assetEntryService.getAssetTagAssetEntries($assetId))
    #set($assetEntry = "")
#foreach($assetEntry in $assestList)
         #set($journalArticleResource =$journalArticleResourceLocal.getJournalArticleResource($assetEntry.getClassPK()))
         #set($journalArticle = $journalArticleLocal.getArticle($groupId,$journalArticleResource.getArticleId()))
         #set($latestArticle= $journalArticleLocal.getLatestArticle($groupId,$journalArticle.getArticleId()))
         #set( $journalArticleDisplay= $journalContentUtil.getDisplay($groupId,$latestArticle.getArticleId(), null,null,$languageId,null, 1, $xmlRequest))
            $journalArticleDisplay.getContent()
        #end