Ticket #6229 (closed bug: notabug)
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: | |
| Blocking: | Blocked by: |
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
Change History
comment:1 Changed 3 years ago by scott.gonzalez
- Status changed from new to closed
- Resolution set to worksforme
comment:2 Changed 3 years ago by zerointeger
- Status changed from closed to reopened
- Resolution worksforme deleted
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?
comment:3 Changed 3 years ago by scott.gonzalez
- Status changed from reopened to closed
- Resolution set to worksforme
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.
comment:4 Changed 3 years ago by zerointeger
- Status changed from closed to reopened
- Resolution worksforme deleted
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($_GETdo?) {
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 3 years ago by zerointeger
-
attachment
test.php
added
Test case demonstrating broken cookie, ajax initial page load
comment:5 Changed 3 years ago by scott.gonzalez
- Status changed from reopened to closed
- Resolution set to invalid
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.
This works fine for me (didn't use the cookie plugin). Please use the forums for help.