Search and Top Navigation
#6229 closed bug (notabug)
Opened October 26, 2010 01:22PM UTC
Closed October 26, 2010 06:46PM UTC
Last modified October 11, 2012 09:15PM UTC
jQuery 1.4.2-1.4.3, UI 1.8.5, ajax tabs selector and selected option broke
| Reported by: | zerointeger | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | |
| Component: | ui.tabs | Version: | 1.8.5 |
| Keywords: | tabs, ajax, selected element | Cc: | |
| Blocked by: | Blocking: |
Description
I have been scouring around looking for more information, as well as attempting to debug some of the methods and objects internal to both libraries but am not having any luck.
Here is a description of the problem I am experiencing since upgrading.
Output from the firebug plugin shows GET requests take place but the content is always referring to the last tab element in the UL list and does not load into the ui.panel or ui.tab page element(s).
Here is an example:
<script src="libs/js/jquery-1.4.3.min.js"></script>
<script src="libs/js/jquery-ui-1.8.5.custom.min.js"></script>
<script src="libs/js/jquery.cookie.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
var tabID = $j.cookie('tabID')||0;
$j('#tabs').tabs({
ajaxOptions: {
async: true,
cache: true,
},
selected: tabID,
show: function(junk, ui) {
$j.cookie('tabID', ui.index, {expires:3600});
},
});
});
</script>
<div id="tabs" class="tabs">
<ul id="tabID">
<li><a href="content.php?do=0x00a0" />One</a></li>
<li><a href="content.php?do=0x00b0" />Two</a></li>
<li><a href="content.php?do=0x00c0" />Three</a></li>
</ul>
</div>
Output from firebug shows that upon initial page load the 'selected' option (which should load the last tab element integer stored in the cookie), is sending a GET request for the last element in the UL list. In this case do=0x00c0. On top of that the response from the ajax GET request does not load in the ui.panel or ui.tab element(s).
I am using Linux (Kubuntu), Firefox 3.6.10 canonical - 1.0 if that makes a difference.
Attachments (1)
Change History (8)
Changed October 26, 2010 01:44PM UTC by comment:1
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
Changed October 26, 2010 05:35PM UTC by comment:2
| resolution: | worksforme |
|---|---|
| status: | closed → reopened |
Then why would the contents of:
load:function(a){a=this._getIndex(a);
Result in a -1?
I am assuming this value should be the value of the cookie or the first tab element within the element being used?
And why would the contents of:
h=d.data(c,"load.tabs");
Always result in the last tab's href value?
Shouldn't that be the href value of currently loaded tab?
Changed October 26, 2010 05:46PM UTC by comment:3
| resolution: | → worksforme |
|---|---|
| status: | reopened → closed |
As far as I can tell, the problem is in your code, not the plugin. As previously stated, please use the forums, or provide a full test page that shows the problem using just the tabs plugin.
Changed October 26, 2010 06:28PM UTC by comment:4
| resolution: | worksforme |
|---|---|
| status: | closed → reopened |
Here is a very simple test case to illustrate the problem.
Upon first page load the page request is defaulting to the last list element href value (?do=0x00f0) when it should be loading the last tab id href value.
Once the page loads for the first time you can load the content for each tab normally but it is the initial loading that causes problems.
<?php
switch($_GET['do']) {
case '0x00a0':
echo 'test-a.html';
case '0x00b0':
echo 'test-b.html';
case '0x00c0':
echo 'test-c.html';
case '0x00d0':
echo 'test-d.html';
case '0x00e0':
echo 'test-e.html';
case '0x00f0':
echo 'test-f.html';
default:
echo 'test-a.html';
}
?>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="templates/default/css/overcast/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" type="text/css" href="templates/default/css/default.css" />
<script type="text/javascript" src="libs/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="libs/js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="libs/js/jquery.cookie.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
var loading = '<img src="templates/default/images/loading.gif" width="20" height="20" alt="Loading content..." title="Loading content..." />';
var tabID = $j.cookie('tabID')||0;
$j('#tabs').tabs({
rotate: 0,
ajaxOptions: [{async:true,cache:true}],
fx: [{opacity:'toggle',height: 'toggle',duration:'normal'}],
selected: tabID,
show: function(junk, ui) {
$j.cookie('tabID', ui.index, {expires:3600});
},
spinner: loading
});
});
</script>
</head>
<body>
<div id="tabs" class="tabs">
<ul id="tabID">
<li><a href="content.php?do=0x00a0">Main</a></li>
<li><a href="content.php?do=0x00b0">Purchasing</a></li>
<li><a href="content.php?do=0x00c0">Inventory</a></li>
<li><a href="content.php?do=0x00d0">Reports</a></li>
<li><a href="content.php?do=0x00e0">Options</a></li>
<li><a href="content.php?do=0x00f0">Exit</a></li>
</ul>
</div>
</body>
</html>
Changed October 26, 2010 06:46PM UTC by comment:5
| resolution: | → invalid |
|---|---|
| status: | reopened → closed |
You're passing a string (the result of the cookie) instead a number. If you use parseInt() on the result of $.cookie(), it will work.
Changed October 26, 2010 06:48PM UTC by comment:6
Can the documentation regarding this be updated?
Changed October 26, 2010 06:57PM UTC by comment:7
The documentation said that the selected option accepts a Number. I'm not sure what else you'd want.
Changed October 11, 2012 09:15PM UTC by comment:8
| milestone: | TBD |
|---|
Milestone TBD deleted
This works fine for me (didn't use the cookie plugin). Please use the forums for help.