2

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.

enter image description here

Can someone explain the issue and work-around for it?

P.S : Same Question asked before but it looks like no one answered there.

Improve this question

2 Answers 2

Reset to default
1

If you use the browser's "Inspect" feature to look at the HTML of the page you see a large block of JavaScript per apex:enhancedList that starts like this:

<script>new ListViewport('j_id0:j_id7', 'o', {"buttons":[],"retURL":"/apex/mypage","list...

So it looks like this JavaScript executes when the page loads and queries the data and dynamically generates the HTML table. Perhaps that code includes logic to skip generating the HTML table when it is contained in a display: none part of the page.

A workaround is to wait until the enhanced lists have loaded before applying the tab styling. Here is one way to do that:

<div id="tabs" style="visibility: hidden">
    <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" oncomplete="listComplete()"/>       
    </div>
    <div id="contactsTab">
        <apex:enhancedList type="Contact" height="800" oncomplete="listComplete()"/>
    </div>
    <div id="oppotunitiesTab">
        <apex:enhancedList type="Opportunity" height="800" oncomplete="listComplete()"/>
    </div>

</div>

<script>
var count = 0;
function listComplete() {
    count++;
    if (count == 3) {
        jQuery("#tabs").tabs().css('visibility', 'visible');
    }
}
</script>

The down-side is that the page does not display until all the enhanced lists have loaded; you could add some wort of "Wait while data loads..." busy indicator to re-assure the user to alleviate that problem.

Improve this answer
3
  • Sorry but it did not solve Keith! The HTML table/listView is getting generated but it looks like the issue is in the width of different div elements inside that. Temporary solution is that I caught the same div elements and assigned width to them when they switch over to another tab. But I don't understand the reason behind this improper behaviour though...
    – sam_s
    Apr 3, 2016 at 16:54
  • @sam_s Above code worked for me with Chrome but if you have something that works for you post it as an answer and then you can accept it (after a waiting period).
    – Keith C
    Apr 3, 2016 at 19:48
  • It was my mistake, I got it now correctly. (I rechecked my code again and saw that tabs are initialized twice in my code). The other work-around is just a hack of classes and Ids and assigning their widths. This is more elegant and I accepted it, thanks!
    – sam_s
    Apr 3, 2016 at 20:20
2

I found success by using the apex:tabPanel and setting the switchType = ajax. Everything began rendering properly.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .