I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs). this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.
This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a> </li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource