Ajax tab container showing incorrect text

Question

I have a ajaxToolKit:TabContainer on my website. I have three tabs that every Product populates in some form or another (Description, Additional Information, Reviews). I also have three other tabs that are dynamically created, and loaded into the tab container if the products meet certain criteria . I am running into a problem when I load in those three dynamic tabs though.

When I load the tabs, the text from the Description tab shows in all the other tabs until I click on the Description tab, it then disappears from all the other tabs.

It happens in all the browsers that I really care about (Chrome, IE, FF). The html markup, when you view the source, has the text within the correct div and tab panel but it is displaying incorrectly for some reason.

Here is how I load the controls in the Code behind and add them the container:

            TabPanel overviewTab = new TabPanel();

            ProductOverviewInfo control = (ProductOverviewInfo)Page.LoadControl("~/Controls/ProductOverviewInfo.ascx");
            control.overview_populate();

            overviewTab.Controls.Add(control);
            overviewTab.HeaderText = "OVERVIEW";
            ProductTabs.Controls.AddAt(firstVisibleTab, overviewTab);

firstVisibleTab is just an int value deciding where I want to insert the tab.

Now, I found a fix for this but it is not what I want and not what my project sponsor wants either. If I just use ProductTabs.Control.Add(tab) then I don't have the problem. BUT if the product meets the criteria to have an overview tab (the code above) I want that tab to be active.

Now, you may ask, why don't you just use the .Add(tab) and then have the ActiveTabIndex be where you inserted the new tab. Well, I tried that and for some reason when I would do the check (or just add it in directly in the code above) the whole TabContainer would not display, at all.

So in about half of the products I am working with I have the problem of this text showing in the wrong tab, the other half doesn't have the problem because there is no overview tab (or the other 2 dynamically loaded tabs) present.

Answer 1

make dynamically created tab in the first position is really required? . because it just inheriting the content from the previouly existing tab

Answer 2

Used a jquery hack to hide the tabs panel. The native javascript for the panel makes it show again. not the cleanest but it worked for what I wanted to do.

jQuery(document).ready(function () {
    jQuery(".ajax__tab_panel").hide();
});