2012-02-24 14 views
1

私はliferay-ui:tabsを使用しています。いずれかのタブをクリックすると、ページ全体がリフレッシュされます。私はページをリフレッシュさせたくありませんでした。そこで、私は liferay-ui:セクションタグを使用し、liferay-ui:tabsの "refresh"属性をfalseに設定してみました。しかし、このようにして、ポートレットが初めてロードされたときに、すべてのタブの内容も同時にロードされるため、パフォーマンス・ファクタが低下することがわかりました。Ajaxを使用してliferay-ui:tabsを実装する方法は?

<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> 

私はのLiferay-UIを保つことによってjQueryのを使用してこれを実装しようとした: はここに私のコードですのdiv要素のタブ、その後のdiv#IDは要素をクリックすると、私が取得しようクリックされたタブの名前。しかし、これは"jQueryが定義されていません"型のエラーを表示していますが、jQueryはtoggle()関数を使用しています。 FireBugコンソールでjQueryコードを実行すると、それぞれのタブ名でタブのonClickという警告が表示されることがわかりましたが、それ以外の場合はエラーが表示されています。

ここは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> 

私はタブをクリックすると、それだけでタブの内容がアウトにロードされるようにするには、この使用してAJAXを(私がクリックしたタブ名またはタブ-IDを取得する場合)を実装する方法はありますリフレッシュどうすればいいか教えてください。私を助けてください。 ありがとうございます。

答えて

1

私は暮らしに新しいですが、最近はLiferay.fireとLiferay.on(クライアントサイドIPC)を使用してIPCにAJAXを実装しました。私は正常にAJAXの機能を達成しています。ここにいくつかのリンクがあります。それはあなたがあなたが(私の場合は、ボタンを持っている)のタブを持っているように、タブのクリック時にこれを実装しようとすることができます

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

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

...あなたを助けかもしれません。これがあなたの問題を解決するのに役立つことを願っています。

関連する問題