Fóruns

Início » Liferay Portal » English » 3. Development

Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
Ritesh Dhirubhai Gajera
How Can I Ajax call on Liferay-ui:tab?
27 de Fevereiro de 2012 22:09
Resposta

Ritesh Dhirubhai Gajera

Ranking: Junior Member

Mensagens: 66

Data de entrada: 21 de Fevereiro de 2012

Mensagens recentes

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.
Amit Doshi
RE: How Can I Ajax call on Liferay-ui:tab?
5 de Julho de 2012 04:57
Resposta

Amit Doshi

Ranking: Liferay Master

Mensagens: 549

Data de entrada: 29 de Dezembro de 2010

Mensagens recentes

Ritesh :-


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.


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