PDA

View Full Version : [CLOSED] TabPanel Frame loading issue



WDewispelaere
Oct 29, 2013, 2:32 PM
We have a TabPanel which we use to load several pages in frame mode. The first tab contains some usercontrols to be loaded when the page is shown. Whenever we open the 2nd tab (OrganisatieTabLinks in the example) first, it becomes impossible to access any of the other tabs. It just shows the content of the 2nd tab. If we start on any other tab, everything works as expected. I suspect something goes wrong in the rendering phase, because when I check the HTTP requests the correct pages seem to be retrieved, they are just never rendered. We have this issue on alll our pages that use the TabPanel in a similar way as the code below:



<ext:TabPanel ID="OrganisatieTabPanel" runat="server" ActiveTabIndex="0" border="false" BodyBorder="0">
<Items>
<ext:Panel ID="OrganisatieTabGegevens" runat="server" BodyPadding="6" Border="false">
<Items>
<ext:Panel ID="PanelGegevensGegevens" runat="server" Border="false">
<Content>
<Organisatie:Gegevens runat="server" ID="OrganisatieGegevens" />
</Content>
</ext:Panel>
<ext:Panel ID="PanelGegevensForm" runat="server" Border="false">
<Content>
<Organisatie:Form runat="server" ID="OrganisatieForm" />
</Content>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="OrganisatieTabLinks" runat="server" BodyPadding="6" Border="false" Height="500" OverflowX="Hidden" OverflowY="Hidden">
<Loader ID="Loader2" runat="server" Url="~/Pages/UIOrganisatie/Links.aspx" Mode="Frame">
<LoadMask ShowMask="true" />
<Params>
<ext:Parameter Mode="Raw" Name="id" Value="Horeca.getCurrentFrame().Horeca.state.current_orga nisation" />
</Params>
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabPersonen" runat="server" BodyPadding="6" Border="false" Height="500" OverflowX="Hidden" OverflowY="Hidden">
<Loader ID="Loader3" runat="server" Url="~/Pages/UIOrganisatie/Personen.aspx" Mode="Frame">
<LoadMask ShowMask="true" />
<Params>
<ext:Parameter Mode="Raw" Name="id" Value="Horeca.getCurrentFrame().Horeca.state.current_orga nisation" />
</Params>
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTab50PlusBedrijf" runat="server" BodyPadding="6" Border="false">
<Loader ID="Loader4" runat="server" Url="">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabSpecialeOpleidingen" runat="server" BodyPadding="6" Border="false">
<Loader ID="Loader5" runat="server" Url="">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabPremies" runat="server" BodyPadding="6" Border="false">
<Loader ID="Loader6" runat="server" Url="">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabAcreditatie" runat="server" BodyPadding="6" Border="false">
<Loader ID="Loader7" runat="server" Url="">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabDiensten" runat="server" BodyPadding="6" Border="false">
<Loader ID="Loader8" runat="server" Url="">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabInteracties" runat="server" BodyPadding="6" Border="false">
<Loader ID="Loader9" runat="server" Url="">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Panel ID="OrganisatieTabNotas" runat="server" BodyPadding="6" Border="false" Height="500" OverflowX="Hidden" OverflowY="Hidden">
<Loader ID="Loader1" runat="server" Url="~/Pages/UIOrganisatie/Notas.aspx" Mode="Frame">
<LoadMask ShowMask="true" />
<Params>
<ext:Parameter Mode="Raw" Name="id" Value="Horeca.getCurrentFrame().Horeca.state.current_orga nisation" />
</Params>
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>

geoffrey.mcgill
Oct 29, 2013, 3:33 PM
Hello,

My guess is a JavaScript error is being thrown on the main page after the Tab is loaded. This might be causing the TabPanel to lockup.

The code sample you provided does not demonstrate the problem, so I was unable to test.

If you run the page in Firefox + Firebug, does a JavaScript error get thrown? any other messages in Firebug?

WDewispelaere
Oct 29, 2013, 4:05 PM
Geoffrey,

there are no js errors on the page.
Short of posting ALL pages I don't see how i could provide more code.
I could give you access to the website, maybe that could help? The site is private though, so I'll need a way to send you the credentials privately.
The problem occurs on all pages where we use the TabPanel regardless of the page loaded in the "breaking"-tab.
Can you think of anything in particular i should check?

Thank you.

Baidaly
Oct 29, 2013, 10:29 PM
Hello!

You mean, if you open the second page you don't see other pages when you click on the tabs, and if open any other page except second it works fine?

Try to change the position of second page and if it happens again the problem in your second page. In order to reproduce the issue, we need only the source code of this page.

Daniil
Oct 30, 2013, 6:10 AM
Hi @WDewispelaere,



there are no js errors on the page.


JavaScript errors can be silent. I mean without any popup alert message. What browser are you testing with?



Short of posting ALL pages I don't see how i could provide more code.


Well, we don't need all the code. We just need a test case to reproduce the problem. As simplified as possible. Here is a technique to simplify:
How to prepare a sample (http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)



I could give you access to the website, maybe that could help? The site is private though, so I'll need a way to send you the credentials privately.


Our policy is to keep public as much as possible. It is very-very rare case when something cannot be resolved publicly.



Can you think of anything in particular i should check?


If you are loading an iframe, do you set up Mode="Frame" somewhere for these Loaders?

<Loader ID="Loader4" runat="server" Url="">

WDewispelaere
Oct 30, 2013, 1:31 PM
Dear sirs,

thank you for the effort. I was able to track down the bug to a css setting. Somebody applied



#Tab_By_ID {
display: block !important;
}


to the tab, causing the other tabs to remain hidden behind this one.
I will make sure the designer repsonsible is put in the company pillory and receives a thorough lashing.