Using apex:enhancedList
tag inside jQuery-tabs or apex:tabPanel
only renders the listView of default tab correctly. If I switch to another tab, I'm loosing the view.
<apex:page controller="extensionController">
<apex:includeScript value="{!URLFOR($Resource.jQueryTab, '/jquery-ui-1.11.3.custom/external/jquery/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryTab, '/jquery-ui-1.11.3.custom/jquery-ui.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQueryTab, '/jquery-ui-1.11.3.custom/jquery-ui.css')}"/>
<script>
jQuery = jQuery.noConflict();
jQuery(document).ready(function() {
jQuery( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#accountTab">Accounts</a></li>
<li><a href="#contactsTab">Contacts</a></li>
<li><a href="#oppotunitiesTab">Opportunities</a></li>
</ul>
<div id="accountTab">
<apex:enhancedList type="Account" height="800"/>
</div>
<div id="contactsTab">
<apex:enhancedList type="Contact" height="800"/>
</div>
<div id="oppotunitiesTab">
<apex:enhancedList type="Opportunity" height="800"/>
</div>
</div>
</apex:page>
If I use apex:tabPanel
instead, it's the same issue.
Can someone explain the issue and work-around for it?
P.S : Same Question asked before but it looks like no one answered there.