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.

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.

  • 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 '16 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 '16 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 '16 at 20:20
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.