#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: | |
| 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 (9)
comment:1 Changed 12 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
comment:2 Changed 12 years ago by
| 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?
comment:3 Changed 12 years ago by
| 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.
comment:4 Changed 12 years ago by
| 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($_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 12 years ago by
Test case demonstrating broken cookie, ajax initial page load
comment:5 Changed 12 years ago by
| 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.
comment:7 Changed 12 years ago by
The documentation said that the selected option accepts a Number. I'm not sure what else you'd want.
This works fine for me (didn't use the cookie plugin). Please use the forums for help.