Posted by 20th on September 18, 2009 at 2:32pm
Jump to:
| Project: | Panels Tabs |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
If you create two mini panels, use tabs display style and add them as blocks on a page, only one is going to work correctly. In my case that was the one displayed lower.
If I click on a tab from the first panel, no switching occurs and the second panel disappears.
Comments
#1
Strangely this happens only if I put one mini panel on a right sidebar, and the second on the footer. Otherwise everything works perfectly. This happens even in Garland theme.
#2
What does this mean?
I created a panel with two different minipanels, which have both tabs style. And it worked well.
Also a export of the panel would be cool.
#3
I didn't put minipanels into a panel. I have used them as blocks.
One of the minipanels I have placed on a right sidebar region, the other on the footer region. I am experiencing the problem only when minipanels are placed in such way. And I don't get any JS errors.
I tried to put one minipanel on left and other on the right sidebars, both on the same sidebar, both on the footer, placed them in a panel. In all cases nothing was wrong.
Except for when one is on the right sidebar, the other is on a footer.
I have tested on Garland and Zen themes. In case of Zen the problem appeared when I used "content bottom" region.
Hope this helps a little.
#4
subscribe
#5
This looks old, but it the closest to the issue I've found. AND LOCATED.
Panels 6.x-3.2
Panels_tab_style 6.x-1.x-dev
A mini panel with two panes (views), tab style, placed in content: OK.
Another mini panel with three panes (views), tab style, placed in sidebar: OK, but the layout of the first thing went wonky. Didn't connect the issues.
Another mini panel with two panes (views), tab style, placed in sidebar above the first: worked, but destroyed the second one there. HTML elements were there, but totally hidden by javascript - making the block look empty.
AFTER tracing through all the javascript (yay firebug), I found a clue.
The validator says:
# Error Line 5432, Column 366: Duplicate ID tabs-tabset-x-1.…bs-tabset-x-1" class="tabs-tabset-x"><h2 class="drupal-tabs-title js-hide">Ed
# Warning Line 325, Column 63: The first occurrence of ID tabs-tabset-x-1 was here.
…set-x-1" class="drupal-tabs js-hide"><ul class="tabs clear-block"><li class="
# Error Line 5490, Column 54: Duplicate ID tabs-tabset-x-2.
…bs-tabset-x-2" class="tabs-tabset-x"><h2 class="drupal-tabs-title js-hide">Re
# Warning Line 587, Column 63: The first occurrence of ID tabs-tabset-x-2 was here.
…set-x-2" class="drupal-tabs js-hide"><ul class="tabs clear-block"><li class="
I find my way into tabs_pre_render_tabset()
It's using form_clean_id() to label its elements, and then appending -1, -2 to that to name the children of that element.
But so does form_clean_id() when it indexes.
The problem is using the same type of suffix as form_clean_id does to number child elements
So we start with :
#tabsetAnd its child panes get named
#tabset-1#tabset-2
Um, OK.
Next time through, tabs_pre_render_tabset() calls form_clean_id('tabset') and finds the name is taken, and gets given
#tabset-1Thanks form_clean_id !
We can make the child elements now named
#tabset-1-1#tabset-1-2
On its own, that's fine too.
Depending on which of these two tabsets com first in the page now, interesting things will happen.
By the time you get three on the page,
#tabset-2#tabset-2-1
#tabset-2-2
all bets are off.
I can click on a tab on the first set and the second panel elsewhere on the page vanishes entirely.
In the first pass the children of a tab get the ids that are then used for the parents of subsequent tabsets.
Jquery then has no idea what to do when it goes looking for #tabset-2 - which is either a tabset holder or a tabset child, depending on who clicked what.
Fugger.
(Actually, I may be a little off in my analysis there, but it's something in that realm. They actually get called tabs-tabset-x or something)
Right now I've got it back to a working state by appending something extra to the $tabset_name.
<?php/**
* Process a tabset prior to rendering.
*/
function tabs_pre_render_tabset($element) {
tabs_load();
// Assign a name, reading from the first parent (the key of this tabset element).
$name = $element['#tabset_name'] = form_clean_id(isset($element['#tabset_name']) && $element['#tabset_name'] ? $element['#tabset_name'] : (isset($element['#parents']) && count($element['#parents']) ? $element['#parents'][0] : 'tabset')).'-x';
?>
"-x" at the end there disturbs this overlap enough.
I think this may be even better.
<?phpfunction tabs_pre_render_tabset($element) {
... .. .
// If the tab_name is still empty, set one.
if (!isset($element[$key]['#tab_name']) || empty($element[$key]['#tab_name'])) {
- $element[$key]['#tab_name'] = 'tabs-' . $element['#tabset_name'] . '-' . $index;
+ $element[$key]['#tab_name'] = 'tabs-' . $element['#tabset_name'] . '-tab' . $index;
}
?>
It looks like a weakness with tabs, but it's probably only evident in panels_tabs.module because it uses no 'tab name' - which is usually expected to be set by the user when using tabs proper.
Hm, now that I've diagnosed the issue, it looks like a fix may be at:
#617642: 2+ Tabs causing duplicate ids
#6
Marking as fixed as the issue in the tabs queue has been committed.
If there are still issues when using the latest versions, please file a new issue.
#7
Automatically closed -- issue fixed for 2 weeks with no activity.