I'm just using a button now to try and get it to work. It is supposed to make another selection in the dropdown box which it does, then show the content page. However it isn't changing the display to the page that was created and instead I have to manually click the new selection in the dropdown.
HTML:
<ul class="nav nav-tabs" id="srTabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#upload">Upload</a></li>
<li><a data-toggle="tab" href="#notes">Notes</a></li>
<li class="dropdown">
Submissions <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu" id="submissionContainer">
<li>Grid</li>
</ul>
</li>
<li><a data-toggle="tab" href="#history">History</a></li>
</ul>
<div class="tab-content" id="srContent">
<div id="home" class="tab-pane fade in active">
<div id="navigationBar" class="text-center">
<button onclick="makeSub(150)">Test</button>
</div>
</div>
<div id="search" class="tab-pane fade"></div>
<div id="upload" class="tab-pane fade"></div>
<div id="notes" class="tab-pane fade"></div>
<div id="grid" class="tab-pane fade">
<h1 align="center">Submissions</h1>
</div>
<div id="history" class="tab-pane fade">
</div>
</div>
JavaScript
function makeSub(id) {
$('<li>'+id+'</li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');
}
You either have to bind click event to the button like in this fiddle I made, or move your makeSub function outside of the $.ready function where button's onclick event can find the function.
$.ready(function(){
//everything else
});
function makeSub(id) {
$('<li>'+id+'</li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');
}
Related
I have a list of meals eaten during the day, categorized by meal: breakfast, lunch and dinner, each with its respective courses. The tab contents show the quantities.
Link on jsFiddle: https://jsfiddle.net/3ma0yt7k/2/ (code gets too long to paste the bulk of it in)
<div class="container">
<div class="tabbable boxed parentTabs">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#meal1">Breakfast</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lunch">Lunch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dinner">dinner</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#all">See All Meals</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show in" id="meal1">
<div class="tabbable">
<ul class="nav nav-pills active nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#yoghurt">yoghurt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cornflakes">corn flakes</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show fade active in" id="yoghurt">
<div class="form-group row">
<p>3 cups of yoghurt</p>
</div>
</div>
<div class="tab-pane fade" id="cornflakes">
<div class="form-group row">
<p>4 bowls of cornflakes</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="lunch">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#fries">Fries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#falafel">Falafel</a>
</li>
</ul>
<div class="tab-content table-top">
<!--pane detail-->
<div class="tab-pane show fade active in" id="fries">
<p>4 plates of fries</p>
</div>
<div class="tab-pane fade in" id="falafel">
<p>4 bowls of falafel</p>
</div>
</div>
</div>
</div>
<!--dinner-->
<div class="tab-pane fade in" id="dinner">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#pasta">Pasta</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pizza">Pizza</a>
</li>
</ul>
<div class="tab-content table-top">
<div class="tab-pane show fade active in" id="pasta">
<div class="form-group row">
<p>3 plates of pasta</p>
</div>
</div>
<div class="tab-pane fade" id="pizza">
<div class="form-group row">
<p>3 slices of pizza</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="all">
<p>gather them all</p>
</div>
</div>
</div>
</div>
I want to click "See all meals" and get a list with all the .tab-pane elements for each of the meals of the day. Basically clicking "see all" should show the panes with the text concerning yoghurt, corn flakes, fries, falafel, pasta and pizza (without the 'children' panes).
I can only gather them up if they are in a single category, or parent-child relationship (like Breakfast where each .tab-pane gets a class of 'active' but that doesn't work for the other ones (unless clicked)?
Apparently the only way to achieve this is to add an extra class to the top-most row of the tabs. this class will then be toggled to display "none" and the elements inside will all have an additional class of "active show".
<div class="tab-pane active **toggle-showing-of-this-class** fade show in" id="meal1">
If anyone has another more elegant solution in the meanwhile it would be nice.
I have created nav-tabs using bootstrap. Now I want to load html files into tab content on tab click. Can someone help me with java script.
This is my html:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" id="Home" href="#home">Home</a></li>
<li><a data-toggle="pill" id="Menu1" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" id="Menu2" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
</div>
<div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3>
</div>
<div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3>
</div>
</div>
</div>
</div>
</div>
</body>
In the above code, when i click on the home tab i want to load an external html(x.html) file into home div under tab-content div. I want the same functionality when i click on the menu1 tab(y.html). When I load (y.html) i need to hide (x.html). Someone please help me...!!!
I used the below javascript. But it is not working.:
$('a#Home').click(function(){
$("#home").load("x.html");
});
$('a#Menu1').click(function(){
$("#menu1").load("y.html");
});
You can use .hide(), .show()
$('a#Home').click(function(e) {
e.preventDefault();
$("#home").load("x.html", function() {
$("#menu1").hide();
$(this).show();
});
});
$('a#Menu1').click(function(e) {
e.preventDefault();
$("#menu1").load("y.html", function() {
$("#home").hide();
$(this).show();
})
});
I have the following script:
$(".btn.btn-default").click(function () {
$(this).siblings().removeClass('active').end().addClass('active').val($(this).text());
if (this.id.contains('fear')) {
$('#fear').val($(this).text());
} else if (this.id.contains('control')) {
$('#control').val($(this).text());
} else if (this.id.contains('danger')) {
$('#danger').val($(this).text());
$('#tab2').tab('show');
}
});
Focusing specifically on when #danger is clicked, I'm trying to change the bootstrap tab with:
$('#tab2').tab('show');
however it does not seem to work. Any ideas?
//Updated with tab html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Step 1</a></li>
<li><a data-toggle="tab" href="#tab2">Step 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div id="obj" class="draggable drag-drop"> Grass </div>
<div id="obj" class="draggable drag-drop"> Tree </div>
</div>
<div id="tab2" class="tab-pane fade in active">
<div id="act" class="draggable drag-drop"> Fire </div>
<div id="act" class="draggable drag-drop"> Collapsed </div>
</div>
I am using Bootstrap tabs in my website. When page loads tab will be filled with data at run-time using dynamic content. I am using data-target attribute on anchor tag for that, but it does not seems to work at all.
Here is what I tried so far:
HTML
<div class="container">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Tab 1
</li>
<li role="presentation">
Tab 2
</li>
<li role="presentation">
Tab 3
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="test_1"></div>
<div role="tabpanel" class="tab-pane active" id="test_2"></div>
<div role="tabpanel" class="tab-pane active" id="test_3"></div>
</div>
</div>
</div>
Here I am trying to load content of remote file showTab1.do inside div with id="test_1" when using data-target="#test_1" on anchor tag. But it is not working. What I know is if I am using data-target we don't need to write any jQuery/JavaScript to load data in tab as data-target will do that for us(correct me if I am wrong).
My Bootstrap version is v3.3.6.
Please correct me where I am wrong.
Thanks
There is no way to automatically load data from another url into the tab content using data attributes. You'd need to fire the jQuery load() method when the show tab event fires...
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
...
$(target).load(url,function(result){
...
});
});
Example:
http://codeply.com/go/xZfTnAtKUM
HTML :
<div class="container">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Tab 1
</li>
<li role="presentation">
Tab 2
</li>
<li role="presentation">
Tab 3
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="test_1"></div>
<div role="tabpanel" class="tab-pane" id="test_2"></div>
<div role="tabpanel" class="tab-pane" id="test_3"></div>
</div>
</div>
</div>
and load the tab content using jQuery load
JAVASCRIPT:
<script>
$(document).ready(function () {
$('#test_1').load('showTab1.do');
$('#test_2').load('showTab2.do');
$('#test_3').load('showTab3.do');
});
</script>
There were a couple of errors but this works. I added the Tab 1,2 and 3 to the tab panes so you can see the result when you click the nav links (jsut remove the text so it doesn't mess up your flow)..
<div class="container">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 3</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="test_1">Tab 1</div>
<div role="tabpanel" class="tab-pane fade" id="test_2">Tab 2</div>
<div role="tabpanel" class="tab-pane fade" id="test_3">Tab 3</div>
</div>
</div>
</div>
Hope this helps - and then load the data into the tab panes using the .load() method as described below.
hi guys i want to make a vertical nav-tab with nested sub nav-tab i used a sample code from stackoverflow here is jsfiddle but i need somthing more complex i try but did not get what i want below is the scree shot what i exactly want if any one have idea on it please provide me some suggestion it should be on bootstrap 2.3
below is code
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#Tab2">Tab2</a>
</li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a>
</li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a>
</li>
<li> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="supersub" data-toggle="tab" href="#Subtab1">My Super Sub</a></li>
</ul>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
<div class="tab-pane fade" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
</div>
</div>
</div>
You can do something like this:
.nav-tabs > li li {
margin-left: 60px;
}
That'll do the trick.
http://jsfiddle.net/gqfhZ/