title: How to implement liferay-ui:tabs using Ajax?
body: <p>I am using <strong>liferay-ui:tabs</strong> 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 
  <strong>liferay-ui:section</strong> tag and setting "refresh" attribute of <strong>liferay-ui:tabs</strong> 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:</p>
  
  <pre><code> &lt;liferay-ui:tabs names="&lt;%= tabs %&gt;" refresh="false" param="selectedTab"&gt;
      &lt;liferay-ui:section &gt;
          &lt;liferay-util:include page="/html/resourceurlajax/sample_tab_1.jsp" servletContext="&lt;%=this.getServletContext() %&gt;" /&gt;
      &lt;/liferay-ui:section&gt;
  
      &lt;liferay-ui:section&gt;
          &lt;liferay-util:include page="/html/resourceurlajax/sample_tab_2.jsp" servletContext="&lt;%=this.getServletContext() %&gt;" /&gt;
      &lt;/liferay-ui:section&gt;
  
      &lt;liferay-ui:section&gt;
          &lt;liferay-util:include page="/html/resourceurlajax/sample_tab_3.jsp" servletContext="&lt;%=this.getServletContext() %&gt;" /&gt;
      &lt;/liferay-ui:section&gt;
  &lt;/liferay-ui:tabs&gt;   
  </code></pre>
  
  <p>I tried to implement this using jQuery by keeping <strong>liferay-ui:tabs</strong> in <strong>div</strong> element and then clicking on <strong>div#id</strong> element, i tried to get the name of clicked tab. But this is showing <strong>"jQuery not defined</strong>" 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. </p>
  
  <p>Here is the code using jQuery.</p>
  
  <pre><code> &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt; 
   &lt;script type="text/javascript"&gt;
   $(document).ready(function(){  
        $("#&lt;portlet:namespace/&gt;ajax-tabs-demo.aui-tab").click(function(){
          alert($('a',this).html());
      }); 
  
  });
   /script&gt;
  
  &lt;div id="&lt;portlet:namespace/&gt;ajax-tabs-demo"&gt;
  &lt;liferay-ui:tabs names="&lt;%= tabs %&gt;" refresh="false" param="selectedTab"&gt;
  
  &lt;/liferay-ui:tabs&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>