Issue on Tabbing Bootstrap 3 Tab Using Button Click - javascript

an you please take a look at This Demo and let me know why I am not able to tab bootstrap 3 tabbs by clicking on the the buttons?
Here is the code I have:
<div class="btn-group">
<button class="btn btn-default" id="one">1</button>
<button class="btn btn-default" id="two">2</button>
<button class="btn btn-default" id="three">3</button>
<button class="btn btn-default" id="four">4</button>
</div>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">1 </li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">One</div>
<div class="tab-pane" id="profile">Two</div>
<div class="tab-pane" id="messages">Three</div>
<div class="tab-pane" id="settings">Four</div>
</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$("#one").on("click", function () {
('#myTab a:last').tab('show');
});
</script>
Thanks

Have you included jQuery, Bootstrap CSS and JS?
Edit:
Solution: You forgot the '$' sign, at the front, for jQuery.
$('#myTab a:last').tab('show');
Take a look at the following JS Bin for solution: http://jsbin.com/fenapota/2/edit?html,output

Related

how to create nav-tabs next botton validation in jquery i have to validate specific field

I am new to js I have simplest code specific field validation in nav-tabs next button for implement.
<ul class="nav nav-tabs"><li class="active">Shipping</li>`<li>Quantities</li> <li>Summary</li></ul>
<div class="tab-content"><div class="tab-pane active" id="tab1"> <a class="btn btn-primary" id="btnNext">Next</a></div><div class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnNext">Next</a><a class="btn btn-primary" id="btnPrevious">Previous</a></div><div class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnPrevious">Previous</a></div></div>
<script>
$('#btnNext').click(function(){$('.nav-tabs > .active').next('li').find('a').trigger('click');
});$('#btnPrevious').click(function(){$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
There are a few mistakes here. Div tab-pane 3 should have id='tab3' instead of tab2. Also elements must have unique ids. So the previous and next buttons cannot have same ids. Instead of id, use class to navigate via buttons using jquery like this -
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><a class="btn btn-primary btnNext">Next</a></div>
<div class="tab-pane" id="tab2"><a class="btn btn-primary btnNext">Next</a><a class="btn btn-primary btnPrevious">Previous</a></div>
<div class="tab-pane" id="tab3"><a class="btn btn-primary btnPrevious">Previous</a></div>
</div>
<script>
$('.btnNext').click(function(){$('.nav-tabs > .active').next('li').find('a').trigger('click');
});$('.btnPrevious').click(function(){$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

Buttons to navigate Bootstrap Pills

I've created a working example here: http://www.bootply.com/A8Tz3gOsiD#
The issue is that after the second pill/tab the back button stops working. Can't figure out why. What's odd is that the "Next Step" button works fine thru all the tabs/pills.
I use Ruby, and would also love to improve my javascript which is pretty bad, just not sure how..
Your HTML ID attributes are not unique
I fixed your second back button for example
$(function(){
$('#setup-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#setup"]').tab('show');
}),
$('#setup-button2').click(function(e){
e.preventDefault();
$('#mytabs a[href="#setup"]').tab('show');
}),
$('#start-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#start"]').tab('show');
}),
$('#signup-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#signup"]').tab('show');
}),
$('#signup-button2').click(function(e){
e.preventDefault();
$('#mytabs a[href="#signup"]').tab('show');
}),
$('#speed-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#speed"]').tab('show');
}),
$('#fulfill-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#fulfill"]').tab('show');
}),
$('#product-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#product"]').tab('show');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid col-md-offset-1">
<div class="row col-md-offset-4 logo-pad">
<%= image_tag("navbar_brand.png") %>
</div>
<div class="col-md-12">
<%# if %>
<ul id="mytabs" class="nav nav-pills nav-wizard pill-font" role="tablist" data-tabs="tabs">
<li role="presentation" class="active">Before We Start</li>
<li role="presentation">Shopify Setup</li>
<li role="presentation">Signing Up</li>
<li role="presentation">Shipping Speeds</li>
<li role="presentation">Fulfillment</li>
<li role="presentation">Products</li>
</ul>
<div class="tab-content well well-pad col-md-10">
<div role="tabpanel" class="tab-pane fade in active" id="start">
<p>Hi, welcome to FBA Shipping by ByteStand. We've tried to make all our apps super easy to use, and as painless as possible. With that in mind we've put together a step by step guide to setting up this app in your Shopify store. This shouldn't take more than 3 minutes, but please go get a hot coffee if it's in the morning, or a cold beverage any other time of day. Don't worry, we'll wait.</p>
<button type="button" id="setup-button" class="btn btn-primary pull-right">Next Step</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="setup">
<p>Perfect, now for our app to work you will need Real Time Carrier Calculated Shipping to be enabled on your Shopify account.
Real Time Carrier Calculated shipping is a setting on your Shopify account, but if that sounds a lot like gibberish, give Shopify a call and they can clarify. The phone numbers are below. It might be free if you paid for you Shopify subscription annually, or it might cost $20 or the equivalent. Don't let them tell you, that you have to upgrade your account to "advanced" or "unlimited", you don't.
</p><ul class="a">
<li>North America:: 1-888-746-7439</li>
<li>United Kingdom:: 0800-808-5233</li>
<li>Australia:: 03-8400-4750</li>
<li>New Zealand:: 07-788-6026</li>
<li>Singapore:: 800-181-1121</li>
</ul>
<p></p>
<button type="button" id="signup-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="start-button" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="signup">
<p>
Setting up the app is super easy. You've already download the app, now enter your credentials within the app. And you are good to go, there are instructions right next to where you enter your credentials, but we've also included pictures and a how to video below.
</p>
<button type="button" id="speed-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="setup-button2" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="speed">
<p class="h4">Allow us access to your Amazon account</p>
<button type="button" id="fulfill-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="signup-button2" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="fulfill">
<p class="h4">Promise your first born to Amazon by accepting their terms</p>
<button type="button" id="product-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="speed-button" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="product">
<p class="h4">
Capture all your important id's and register for ByteStand
</p>
<button type="button" id="product-button" class="btn btn-primary pull-right">Sign Up</button>
<button type="button" id="fulfill-button" class="btn btn-primary pull-right">Back</button>
</div>
</div> <!-- closing of the tab content -->
</div> <!-- end of the columns for the whole page-->
</div><!-- end of the row for the whole page-->

How to create a link that actives a Bootstrap Tab

I have some tabs set up in accordance with the examples here. So show/hiding divs:
http://getbootstrap.com/javascript/#tabs
But I want a <button> inside all the the DIVs which acts as a NEXT button to the following tab. I tried the following which half works, but it does not deal with the updating of the active classes on the tabs at the top:
<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" href="#tab-second">Next</button>
Can it be done?
Using Zakaria's answer I actually figured out a better solution.
Set an ID on each tab link like so:
<li><a data-toggle="tab" href="#tab-second" id="tab-second-link">Second Tab</a></li>
Then add an onclick event to any link:
<a class="btn btn-lg btn-primary" href="#" onclick="javascript: $('#tab-second-link').tab('show');";>Next</a>
Working fiddle
Check this basic example using data-* attributes :
$("button[data-tab-destination]").on('click', function() {
var tab = $(this).data('tab-destination');
$("#"+tab).click();
});
Hope this helps.
$("button[data-tab-destination]").on('click', function() {
var tab = $(this).data('tab-destination');
$("#"+tab).click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active">TAB #1</li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-2">Next</button>
</div>
<div class="tab-pane" id="two"><button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-3">Next</button>
</div>
<div class="tab-pane" id="three">
</div>
</div>
</div>
</div>
</div>
try this code (add bootstrap.js and jquery.js)
<div class="row">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
//CONTENT OF TAB1
<div style="float: left;">
<a style="margin-left:5px;" class="btn btn-set btn-default" href="#tab2" data-toggle="tab"> MOVE TO TAB2</a>
</div>
</div>
<div class="tab-pane" id="tab2">
//CONTENT OF TAB2
<div style="float: left;">
<a class="btn btn-set btn-primary" href="#tab1" data-toggle="tab">MOVE TO TAB1</a></div>
</div>
</div>
example of using it to move between login and (s'inscrire) :

Bootstrap Tabpanel Next Previous Buttons

I have a Tab Panel and it has long content so it would be better for the user to have next and previous buttons.
but they aren't working.
This is aspx code :
<div class="col_4">
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
<li role="presentation" class="active">About Myself</li>
<li role="presentation">Family Details</li>
<li role="presentation">Partner Preference</li>
<li role="presentation">Contact</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="aboutmyself" aria-labelledby="aboutmyself-tab">
<!--Tab1 content-->
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="familydetails" aria-labelledby="familydetails-tab">
<!--Tab2 content-->
<a class="btn-all btnPrevious" >Previous</a>
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="partnerpreference" aria-labelledby="partnerpreference-tab">
<!--Tab3 content-->
<a class="btn-all btnPrevious" >Previous</a>
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="contact" aria-labelledby="contact-tab">
<!--Tab4 content-->
<a class="btn-all btnPrevious" >Previous</a>
</div>
And here is the script.
<script type="text/javascript">
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
Working fiddle
You code works fine you should just put it inside ready function :
$(function(){
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
})
Hope this helps.

Bootstrap Tabs: Next & Previous Buttons for Forms

I am trying to (eventually) split a form over several Bootstrap 3.x tabs, but I am having trouble with the previous and next buttons. Only the first next button functions and sometimes the tab content doesn't change at all between tabs when the tabs are manually clicked OR using the buttons.
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary" id="btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary" id="btnNext">Next</a>
<a class="btn btn-primary" id="btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary" id="btnPrevious">Previous</a>
</div>
</div>
<script>
$('#btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('#btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
First at All : ID MUST BE UNIQUE
Here is your working code : http://www.bootply.com/120472
HTML :
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext" >Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
</div>
JS :
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
Snippet:
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext" >Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
</div>
For bootstrap 4
<button class="btn btn-info btn-lg previous">Previous</button>
<button class="btn btn-info btn-lg next">Next</button>
$('.next').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.previous').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
Anyone who want to perform next previous operations on tab, follow following steps:
a) Put next prev buttons in each tab-panel
b) Bind the buttons clicks to body so that it will be called on click
c) On click trigger click of next/prev tab
d) If it is last tab redirect user to appropriate tab (Call show events of first or last tab)
/**** JQuery *******/
jQuery('body').on('click','.next-tab', function(){
var next = jQuery('.nav-tabs > .active').next('li');
if(next.length){
next.find('a').trigger('click');
}else{
jQuery('#myTabs a:first').tab('show');
}
});
jQuery('body').on('click','.previous-tab', function(){
var prev = jQuery('.nav-tabs > .active').prev('li')
if(prev.length){
prev.find('a').trigger('click');
}else{
jQuery('#myTabs a:last').tab('show');
}
});
/******* CSS *********/
.previous-tab,
.next-tab{
display: inline-block;
border: 1px solid #444348;
border-radius: 3px;
margin: 5px;
color: #444348;
font-size: 14px;
padding: 10px 15px;
cursor: pointer;
}
<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active">Step1</li>
<li role="presentation">Step2</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="step1">
<p>tab1 content</p>
<p>//Include next prev buttons in the tab-content</p>
<span class="previous-tab">previous</span>
<span class="next-tab">next</span>
</div>
<div role="tabpanel" class="tab-pane" id="step2">
<p>tab2 content</p>
<p>//Include next prev buttons in the tab-content</p>
<span class="previous-tab">previous</span>
<span class="next-tab">next</span>
</div>
</div>

Categories