Menu
Hey guys, I have been working on developing an ajaxian interface for a client, and I think I may have stumbled upon a bug with the tabs ui. Here is an explanation of what I am doing.
I have lets say 3 tabs and user is on tab 1. On tab 1 there are some links which allows the user to click and open a new tab dynamically through the javascript and then automatically select the new tab. This works fine, except that when you enable the tabs fx method the ability to select the new tab seemingly stops working. Creating the tab works, but the selection becomes goofy. Below is an example of the main page which includes the tabs.
test.html
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”/admin/css/jquery.ui.css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.ui.js”></script>
<script>
function addTab(){
$(“#tabs”).tabs(‘add’,’test3.php’, “NEW”, 1);
$(“#tabs”).tabs(‘select’, 1);
//Doesnt work either, same result
//$(“#tabs”).tabs(‘option’, ‘selected’, 1);
}
$(function(){
$( “#tabs” ).tabs({
fx: { opacity: “toggle” }
});
});
</script>
</head>
<body>
<div id=”tabs”>
<ul>
<li><a href=”test1.php”>Test A</a></li>
<li><a href=”test2.php”>Test B</a></li>
<li><a href=”test3.php”>Test C</a></li>
</ul>
</div>
</body>
</html>
Here is the code for test1.php
[CODE]<script>
$(function(){
$(“#addtab”).click(function(){
addTab();
});
});
</script>
<h2>Hey There!</h2>
<a id=”addtab” href=”#”>Add New Tab</a><p>
The contents of test 2 and 3 are irrelevant. This is really annoying, since trying to create your own transition animation with tabs is pretty much impossible. Anyone able to get around this? Or am I just not doing something right…
And, just a few other notes. If I do the above, but remove the auto select method out, when the new tab is created and I physically select the tab its initial load will collapse, a second click will show it. If I were to first click tab C and then click the new tab, it will show fine, even though it is that tabs first load. If I left the auto select in, and add the tab dynamically, then click on the tab once the initial tab load collapses it will show fine…
Hopefully, im not crazy!