Menu
Although there are plenty of Twitter Bootstrap questions open that regard similar issues to that which I'm having, I haven't been able to find any solutions to my particular issue. I'm using the twitter bootstraps "tab" feature in order to display content, and while the script succeeds in changing the changing the active tab, the content remains the same.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, Tabs!</title>
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="public/js/bootstrap.min.js"></script>
</head>
<body>
<h3>Version Information:</h3>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#project/src/Graph/Graph.pm__0" data-toggle="tab">9424</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__1" data-toggle="tab">9058</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="project/src/Graph/Graph.pm__0">
<p>
Author: joe<br>
Version: v9424 (1:31 pm February 28, 2013)<br>
Action: Modified<br>
Message: Finalized a bit of the code... should be better now.<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__1">
<p>
Author: joe<br>
Version: v9058 (9:13 pm February 26, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__2">
<p>
Author: joe<br>
Version: v8928 (2:08 am February 25, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__3">
<p>
Author: joe<br>
Version: v8926 (1:14 am February 25, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__4">
<p>
Author: joe<br>
Version: v8924 (10:26 pm February 24, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__5">
<p>
Author: joe<br>
Version: v8890 (9:59 pm February 23, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__6">
<p>
Author: joe<br>
Version: v8889 (9:53 pm February 23, 2013)<br>
Action: Added<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__7">
<p>
Author: joe<br>
Version: v8887 (9:40 pm February 23, 2013)<br>
Action: Added<br>
Message: Hello, world!<br>
</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.nav-tabs').tab();
});
</script>
</body>
</html>
All the dependence files are loaded just fine when I run this (for reference, the version of bootstrap being used is 2.3.1). I've been head-desking about this problem for quite some time now, so any help would be greatly appreciated.
EDIT: Here's a jsfiddle link containing the error code.
538
You need to move the Bootstrap script reference above your ready event. So, the bottom of your page should look like this:
<script src="public/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.nav-tabs').tab();
});
</script>
Also, since you specified an HTML5 doctype, the type attribute is optional in the script tag.
EDIT 2:
I'm fairly certain you can get rid of the manual tab binding - I don't use it on my site, and this jsFiddle doesn't do it either: http://jsfiddle.net/C3gQb/
As you can see, you just need to bind the click events of your "tabs", and then it will work. This should work:
<script src="public/js/bootstrap.min.js"></script>
<script>
$(function(){
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
If it doesn't, I suspect there is something unusual about your browser/dev environment that isn't obvious from what you've posted.
EDIT 4
Yeah, we've isolated the problem with your new jsFiddle. I tweaked the top 2 for this version: http://jsfiddle.net/C3gQb/4/ - and those two now work:
$(function(){
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<h3>Version Information:</h3>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#project-src-Graph-Graph-pm__0" data-toggle="tab">9424</a>
</li>
<li>
<a href="#project-src-Graph-Graph-pm__1" data-toggle="tab">9058</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="project-src-Graph-Graph-pm__0">
<p>
Author: joe<br>
Version: v9424 (1:31 pm February 28, 2013)<br>
Action: Modified<br>
Message: Finalized a bit of the code... should be better now.<br>
</p>
</div>
<div class="tab-pane" id="project-src-Graph-Graph-pm__1">
<p>
Author: joe<br>
Version: v9058 (9:13 pm February 26, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__2">
<p>
Author: joe<br>
Version: v8928 (2:08 am February 25, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__3">
<p>
Author: joe<br>
Version: v8926 (1:14 am February 25, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__4">
<p>
Author: joe<br>
Version: v8924 (10:26 pm February 24, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__5">
<p>
Author: joe<br>
Version: v8890 (9:59 pm February 23, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__6">
<p>
Author: joe<br>
Version: v8889 (9:53 pm February 23, 2013)<br>
Action: Added<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__7">
<p>
Author: joe<br>
Version: v8887 (9:40 pm February 23, 2013)<br>
Action: Added<br>
Message: Hello, world!<br>
</p>
</div>
</div>
</div>I can see that you are referencing an older version of jQuery. Can you upgrade it to 1.9.x? I don't think they are working with an older version of jQuery.
Also, try this:
<script type="text/javascript" src="public/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.nav-tabs').tab();
});
</script>
And also, please move the bootstrap.min.js before the function.
33
Just check the bootstrap version... it should be v2.3.1 +
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
