Skip to main content

Search and Top Navigation

#4233 closed bug (fixed)

Opened February 25, 2009 07:16PM UTC

Closed October 22, 2010 03:02AM UTC

Required markup structure not documented

Reported by: wichert Owned by:
Priority: minor Milestone: 1.8.5
Component: ui.tabs Version: 1.6rc6
Keywords: Cc:
Blocked by: Blocking:
Description

Looking at the UI Tabs documentation the required markup for AJAX-based tabs is documented, but there is no hint what the markup for non-AJAX tabs should be like. This can only be extracted by looking at the source for the example at the bottom of the page.

A summary of the required markup and an example should be easy to add, and will help a lot.

Attachments (0)
Change History (5)

Changed May 07, 2009 01:10PM UTC by jzaefferer comment:1

component: [meta] ui.docsui.tabs
description: Looking at [http://docs.jquery.com/UI/Tabs the UI Tabs documentation] the required markup for AJAX-based tabs is documented, but there is no hint what the markup for non-AJAX tabs should be like. This can only be extracted by leaking at the source for the example at the bottom of the page. \ \ A summary of the required markup and an example should be easy to add, and will help a lot.Looking at [http://docs.jquery.com/UI/Tabs the UI Tabs documentation] the required markup for AJAX-based tabs is documented, but there is no hint what the markup for non-AJAX tabs should be like. This can only be extracted by looking at the source for the example at the bottom of the page. \ \ A summary of the required markup and an example should be easy to add, and will help a lot.
milestone: TBD1.7.2
type: enhancementbug

Missing tabs docs.

Changed May 07, 2009 01:39PM UTC by jzaefferer comment:2

milestone: 1.7.21.8

Changed January 07, 2010 06:10PM UTC by sigmasquirrel comment:3

I'd like to patch this bug but I'm unsure of what the correct behavior should be.

The issue occurs when using a markup structure that doesn't match the default. If you add a new tab to the end of the list (which is the default behavior if you don't specify an index) specifying the id of a content div that is already in the DOM, it will be inserted after the UL containing the tabs. If you do the same, but specify an index that's not the end of the list, it will be inserted after an existing content element, which may or may not match the behavior of the first case.

Example:

http://bryanrsmith.com/tabs.html

Note that when you insert a new tab anywhere other than the end of the list, it's added to #content-container, however, if you insert a new tab at the end of the list, it's appended to the ul's parent, which is not the correct location.

The offending code (from line 468 of jquery.ui.tabs.js)

try to find an existing element before creating a new one

var $panel = $('#' + id);

if (!$panel.length) {

$panel = $(o.panelTemplate).attr('id', id).data('destroy.tabs', true);

}

$panel.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide');

if (index >= this.lis.length) {

$li.appendTo(this.list);

$panel.appendTo(this.list[0].parentNode); Bad: maybe this.list[0].parentNode is not where we're keeping our content elements

}

else {

$li.insertBefore(this.lis[index]);

$panel.insertBefore(this.panels[index]); // Correct, as long as there is at least 1 existing tab

}

It seems to me that the correct behavior is to not try to re-insert the content div if it already exists in the DOM-- just leave it where it is. An alternative may be to add a parameter for a DOM element for the content div to be appended to. This would also allow the plugin to work consistently when adding a remote tab to an instance of tabs that currently has 0 tabs, in which case we have no way to know where the new tab should be inserted.

This is the only place in the tabs plugin I've found that causes problems when using a non-standard markup structure. Any thoughts on how to handle it?

Changed January 07, 2010 06:17PM UTC by sigmasquirrel comment:4

Sorry, this comment was meant for http://dev.jqueryui.com/ticket/4578. Please delete.

Changed October 22, 2010 03:02AM UTC by scottgonzalez comment:5

milestone: 1.91.8.5
resolution: → fixed
status: newclosed

This is now documented in the theming section (not sure when the change was made).