如何使用 Ajax 实现 liferay-ui:tabs？答案

【问题标题】：How to implement liferay-ui:tabs using Ajax?如何使用 Ajax 实现 liferay-ui:tabs？
【发布时间】：2012-02-29 19:08:50
【问题描述】：

我正在使用 liferay-ui:tabs，每当我点击任一选项卡时，整个页面都会刷新。我不希望页面被刷新。所以，我尝试使用 liferay-ui:section 标记并将 liferay-ui:tabs 的“刷新”属性设置为 false。但是这样做，我发现当第一次加载 portlet 时，所有选项卡的内容也会同时加载，这降低了性能因素。这是我的代码：

 <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:tabs 保留在 div 元素中然后单击 div#id 元素来使用 jQuery 来实现这一点，我试图获取单击选项卡的名称。但这显示了 "jQuery not defined" 类型的错误，而 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），这样当我单击选项卡时，只有该选项卡的内容会在不刷新的情况下加载。请给我有关如何执行此操作的建议。请帮助我。谢谢。

【问题讨论】：

标签： jquery liferay-6

【解决方案1】：

我是 liferay 的新手，但最近我使用 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

因此，您可以尝试通过单击选项卡来实现此功能，因为您有选项卡（在我的情况下，我有按钮）。希望这可以帮助您解决问题。

【讨论】：