Tabs: how to choose where to insert (in DOM) the ajaxly requested ui-tabs-panel
Hi! Hi Klaus! :D
As many of you may know, it is possible to have some content between your tabs (tabs-nav) and your panels (tab-panel).
That content between them can be seen as content "shared" across every tab.
Example:
<div style="margin-left: 40px;">[tabs-nav]
[tab 1]
[tab 2]
[tab 3]
[/tabs-nav]
<b>[ some HTML ]</b>
[tab-panel 1]
[tab-panel 2]
[tab-panel 3]
</div>
If you switch between tabs, the [ some HTML ] remains there, above each [tab-panel], creating the "effect" of being on every panel.
This works perfectly for common (already-in-the-dom) tabs.
But, when using Ajax tabs, I'm having some troubles making them work as I expect.
Things to know:
1) the Ajax tabs are working. The ajaxly requested content is being loaded.
2) in this site I'm working, each tab is implemented in the following way: you can access each one
using an URL and you still will get the whole page (not just the
tab-panel content that will be sent ajaxly if loaded by tabs).
In other words, the site have urls like this: <a href="http://www.site.com/section/tab1/" target="_blank">http://www.site.com/section/tab1/</a>, <a href="http://www.site.com/section/tab2/" target="_blank">http://www.site.com/section/tab2/</a>, <a href="http://www.site.com/section/tab3/" target="_blank">http://www.site.com/section/tab3/</a> that will bring the whole page if you point to any of them. Then, once the page is loaded, other tabs will work ajaxly.
First, the one millon dollar question:
How does jQuery Tabs decide where to insert the ajaxly delivered tab-panel?
Probably
(I don't know how to read code and find this, sorry), it's based in
some kind of generated "index" based on the orders of tabs on tabs-nav.
This seems to work fine if you start navigating from the first tab. That is, the pages loads (no Ajax involved yet) and the enabled tab is the first tab.
Then, ajaxly-loaded tab-panels are inserted in the right order. In other words, if after page loading, you click on the 3rd tab, the corresponding tab-panel is created after the first tab-panel.
And then, if you click on the 2nd tab, the corresponding tab-panel is added between the first and the third tab-panel-
Finally, if you click on a 4th tab, its tab-panel is added after the 3rd panel.
Right? Is that how it is supposed to be?
Ok, now suppose I open this page: <a href="http://www.site.com/section/tab2/" target="_blank">http://www.site.com/section/tab2/</a>
The #panel-tab2 is loaded/active. No Ajax has been involved yet.
Then, I click on the #tab1.
The ajaxly-delivered #panel-tab1 is added to the DOM before #panel-tab2. Perfect!
Back to the original millon dollar question, how does UI Tabs add the #panel-tab1 in the "correct place" in the DOM?
a) Is #panel-tab1 appended after the [ui-tabs-nav]?
b) or is #panel-tab1 added as a sibling (-1) before #panel-tab2?
I think Tabs currently goes with option a).
Now, let's go back to the "feature" of having some content between the [tabs-nav] and [tab-panel]. The content is "shared" across each tab-panel.
Step 1: Suppose we open this url: <a href="http://www.site.com/section/tab2/" target="_blank">http://www.site.com/section/tab2/</a>
When using Ajax tabs, the server sents this:.
<div style="margin-left: 40px;">
[tabs-nav]
[tab 1]
[tab 2]
[tab 3]
[/tabs-nav]
<b>[ some HTML ]</b>
<b>[tab-panel 2]</b>
</div>
Step 2 (the <b>problem</b> is here):
we click on [tab-1], and we get this:
<div style="margin-left: 40px;">[tabs-nav]
[tab 1]
[tab 2]
[tab 3]
[/tabs-nav]
<b>
[tab-panel 1]</b>
<b>[ some HTML ]</b>
<b>
[tab-panel 2]</b>
</div>
As you can see, the [tab-panel 1] is "getting in the middle": it's being appended after the [tabs-nav] but before the [ some HTML ].
Yes, the <b>[ some HTML ]</b> is still being "shared" across every tabs panel, but the "effect" isn't the one expected: when you are looking at <b>[tab-panel 1]</b>, the <b>[ some HTML ] </b>is at the bottom of the tab-panel. Then, when you switch back to <b>[tab-panel 2]</b>, the HTML is correctly displayed at top of the tab-panel.
Ideally (I think), an ajaxly created [tab-panel] should be created/inserted in the DOM on a place relative to the already loaded [tab-panel].
In other words, if when the page is loaded, the starting tab-panel is [tab-panel 2] then, when clicking on [tab 1], the [tab-panel 1] would be created as the <b>sibling (-1) (that is, before [tab-panel 2].
</b>It may be more complicated when there are more than 2 or 3 tabs but, hey, if for some reason all this rant makes sense, then it can be probably make into code :D.
<b>
</b>
One possible <b>workaround</b> (not tested yet) is to pre-create every [tab-panel] on the server side (as an empty div), so they are already there when you click on an Ajax tab, and so, the ajax-content is inserted inside its corresponding empty tab-panel.
Right now, I'm using the <b>panelTemplate</b> setting, but we are going to test this option of sending an HTML already filled with empty tab-panels .
----------------------
OK, let finish this by now. Congratulations if you read through here. Sorry for my english and sorry if you didn't understand a thing.
Thanks in advance.