CODEWITHSUNDEEP
jqueryliferay-6
sid_sket
sid_sket

Reputation: 81

How to implement liferay-ui:tabs using Ajax?

I am using liferay-ui:tabs and whenever i am clicking on either of the tab, the entire page gets refreshed. I didn't wanted the page to get refreshed. So, I tried this using liferay-ui:section tag and setting "refresh" attribute of liferay-ui:tabs to false. But doing this way, i found that when the portlet is loaded for the first time, contents of all the tabs are also loaded simultaneously which decreases the performance factor. Here is my code:

 <liferay-ui:tabs names="<%= tabs %>" refresh="false" param="selectedTab">
    <liferay-ui:section >
        <liferay-util:include page="/html/resourceurlajax/sample_tab_1.jsp" servletContext="<%=this.getServletContext() %>" />
    </liferay-ui:section>

    <liferay-ui:section>
        <liferay-util:include page="/html/resourceurlajax/sample_tab_2.jsp" servletContext="<%=this.getServletContext() %>" />
    </liferay-ui:section>

    <liferay-ui:section>
        <liferay-util:include page="/html/resourceurlajax/sample_tab_3.jsp" servletContext="<%=this.getServletContext() %>" />
    </liferay-ui:section>
</liferay-ui:tabs>

I tried to implement this using jQuery by keeping liferay-ui:tabs in div element and then clicking on div#id element, i tried to get the name of clicked tab. But this is showing "jQuery not defined" type of error, whereas jQuery is working with toggle() function. I found that when running jQuery code in fireBug console, i got the alert onClick of tab with respective tab name, but otherwise it is showing error.

Here is the code using jQuery.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
 <script type="text/javascript">
 $(document).ready(function(){  
      $("#<portlet:namespace/>ajax-tabs-demo.aui-tab").click(function(){
        alert($('a',this).html());
    }); 

});
 /script>

<div id="<portlet:namespace/>ajax-tabs-demo">
<liferay-ui:tabs names="<%= tabs %>" refresh="false" param="selectedTab">

</liferay-ui:tabs>

Is there any way to implement this using ajax(if i get clicked tab name or tab-id), So that when i click on tab, content of only that tab gets loaded with out refresh. Please give me suggestions on how to do this.Please help me. Thank You.

Upvotes: 1

Views: 2345

Answers (1)

Scorpion
Scorpion

Reputation: 6901

I am new to liferay but recently I have implemented AJAX in IPC using Liferay.fire and Liferay.on(Client Side IPC). I am successfully achieved the functionality of AJAX. Here are some link for this. May be it helps you...

http://www.liferay.com/community/wiki/-/wiki/Main/portlet+to+portlet+communication

http://www.liferay.com/community/wiki/-/wiki/Main/Inter-portlet+communication

So you can try to implement this on the click of tab as you have tab (in my case i have button). Hope this might help you to resolve your problem.

Upvotes: 1

Related Questions