#7707 closed bug (worksforme)

Opened September 08, 2011 04:42PM UTC

Closed September 08, 2011 08:45PM UTC

Tabs: Incorrect documentation for 3.6 ...follow a tab's URL instead of loading its content via ajax

Reported by: spindlegoose Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:
Description

It seems this feature does not work via http. If I browse straight to the file it functions as intended. I am trying to navigate page to page with out loading it via ajax. All of the pages are located in the same site/domain. The html is the same for the other page.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>jQuery UI Example Page </title>

<link type="text/css" href="css/south-street/jquery-ui-1.8.16.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script type="text/javascript">

$(function () {

var tab_cookie_id = parseInt($.cookie("tab_cookie")) || 0;

// Tabs

$('#tabs').tabs({

selected: tab_cookie_id,

select: function (event, ui) {

var url = $.data(ui.tab, 'load.tabs');

if (url) {

$.cookie("tab_cookie", ui.index);

location.href = url;

return false;

}

return true;

}

});

});

</script>

<style type="text/css">

/*demo page css*/

body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px; background-color: #676767;}

.demoHeaders { margin-top: 2em; }

#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

ul#icons {margin: 0; padding: 0;}

ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}

ul#icons span.ui-icon {float: left; margin: 0 4px;}

</style>

</head>

<body>

<h1>

Welcome to jQuery UI! Index</h1>

<!-- Tabs -->

<h2 class="demoHeaders">

Tabs</h2>

<div id="tabs">

<ul>

<li><a href="index.html">Index</a></li>

<li><a href="index1.html">Index 1</a></li>

</ul>

</div>

</body>

</html>

Attachments (0)
Change History (5)

Changed September 08, 2011 06:35PM UTC by scottgonzalez comment:1

milestone: 1.9 → 1.8.17
resolution: → fixed
status: new → closed

Updated the docs.

Changed September 08, 2011 06:36PM UTC by scottgonzalez comment:2

summary: 3.6 ...follow a tab's URL instead of loading its content via ajax → Tabs: Incorrect documentation for 3.6 ...follow a tab's URL instead of loading its content via ajax

Changed September 08, 2011 07:17PM UTC by spindlegoose comment:3

$(ui.tab).attr("href") gives the tab id and not the actual href so the browser does not move to the next page. It also is loading content on the first page twice.

Changed September 08, 2011 07:47PM UTC by scottgonzalez comment:4

milestone: 1.8.17 → 1.9
resolution: fixed
status: closed → reopened

ugh, sorry, I was testing against master.

Changed September 08, 2011 08:45PM UTC by scottgonzalez comment:5

resolution: → worksforme
status: reopened → closed

The documented code works fine for me: http://jsbin.com/onakan/edit#source