Change Bootstrap JS Tab - javascript

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>

Related

Bootstrap 4 JS menu tab

i have this code and its working but not properly.
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
when i click each once its showing the content correctly
but its not working properly and leaving the active and show class when i click on different submenu (ex. B1 and A3 back-and-forth )
my data is dynamic.

I've played a bit and noticed what you reported, then I went to Bootstrap source which tells it is a BS limitation (see show method).
Then the simple options I see are basically 2:
Handle the tabs clicks manually: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
Working example: https://codepen.io/cdtapay/pen/bzegNB
Not being semantic and keeping all of the links in the same list (ul), including the section labels. Working example: https://codepen.io/cdtapay/pen/QYNRwb
Hope it helps.
UPDATE
: There is an issue reported about the show class being leaked: https://github.com/twbs/bootstrap/issues/28118

I have tested it on codepen, and it works like a charm, the active class is removed when clicking another toggle.
https://codepen.io/fazlurr/pen/QYNPBe
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
Maybe the way you generate the ids is not right.

Working With BootStrap Tabs

I am working with bootstrap tabs and am having some issues. When loading the page, the first tab is active as it should be, but it's loading in a different spot than the rest of the content when the other tabs are clicked, and when clicking back to the main tab, the content does not appear.
Content doesn't appear in top left corner
Also, when click another tab, the content displays in the bottom left corner of the screen.
Like this
How can I get my tab content to always display in the top left corner of the tab pane and get my first tab content to always load when clicking back to it?
Here is my tab code:
<form [formGroup]="form">
<div class="form-component-container">
<div class="panel panel-default form component main">
<div class="panel-heading">
<ul id="rowTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
<li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
<li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<p>Tab 1 inner</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>Tab 2 inner</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Tab 3 inner</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Tab 4 inner</p>
</div>
<div id="tab5" class="tab-pane fade">
<p>Tab 5 inner</p>
</div>
<div id="tab6" class="tab-pane fade">
<p>Tab 6 inner</p>
</div>
</div>
</div>
</div>
</div>

Your code works fine, check the jsfiddle https://jsfiddle.net/bsuqoryd/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
<div class="panel panel-default form component main">
<div class="panel-heading">
<ul id="rowTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
<li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
<li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<p>Tab 1 inner</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>Tab 2 inner</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Tab 3 inner</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Tab 4 inner</p>
</div>
<div id="tab5" class="tab-pane fade">
<p>Tab 5 inner</p>
</div>
<div id="tab6" class="tab-pane fade">
<p>Tab 6 inner</p>
</div>
</div>
</div>
</div>
</div>
You might be missing library files or may be ordering of the library files are wrong. Check the console for error.
In the code I have mentioned the ordering of the required library files.
One more jsfiddle https://jsfiddle.net/bsuqoryd/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
<div class="panel panel-default form component main">
<div class="panel-heading">
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<p>Tab 1 inner</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>Tab 2 inner</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Tab 3 inner</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Tab 4 inner</p>
</div>
<div id="tab5" class="tab-pane fade">
<p>Tab 5 inner</p>
</div>
<div id="tab6" class="tab-pane fade">
<p>Tab 6 inner</p>
</div>
</div>
<ul id="rowTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
<li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
<li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
</ul>
</div>
</div>
</div>

How to load a html file into div tabs using javascript

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();
})
});

Dynamically created tabs not showing after creation in Bootstrap

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');
}

loading new page in tabs using twitter bootstrap

Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>

There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>​
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');

Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>​
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>​
The bad thing is just have some copy of the nav-tab codes

Categories

Resources