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.

<%
String tabs1 = ParamUtil.getString(request, "tabs1", "Community");

PortletURL portletURL = renderResponse.createRenderURL();

portletURL.setParameter("tabs1", tabs1);

String tabs = "Community,Friends,Me";
%>

<div id="<portlet:namespace/>ajax-tabs-demo">

<liferay-ui:tabs refresh="false" names="<%= tabs %>" param="selectedTab">
<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>

</div>
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">
$("#<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.


Thanks,
Regards,

Gajera ritesh.

Ritesh :-



I faced the similar problem, I solved my problem by putting condition inside the liferay-ui:section.

So. what I done is setting the Tab Parameter in the controller side and then putting condtion on jsp end.

In below code i set the tabs parameter from the controller or from the doView.

<c:set var="tab1" value="Tab1" />
<liferay-ui:section>
<c:if test="${tabs eq tab1}">
<%@include file="/html/portlet/test.jsp"%>
</c:if>
</liferay-ui:section>


The above code will not load the content from all the Tab by putting condition on all the <liferay-ui:section>. It will load one at a time.

Hope it helps.

Thanks & Regards,
Amit doshi