Bootstrap Tabpanel Next Previous Buttons - javascript

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.

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>

loop thru each section grab modal ID's and apply to modal component

Hello I have the following sections & need to do the following
Loop thru each section and grab the data-target value in each section.
Apply that data-target value to the modal aria-labelledby and id of the sibling
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
Simply loop over each section- get the data-target of the a within the ul li and apply it to the 2 attributes (id and aria-labelled-by) of the modal within that section.
Also - not sure this implementation of the aria-labelled-by is correct- you should not have the id of the element that is being labelled as the element you are labelling.
EDIT - updated to remove the "#" from the id - I did this by using .replace(/#/,'').
$('section').each(function(){
var modalId = $(this).find('a').attr('data-target').replace(/#/,'');
console.log(modalId);
var modal= $(this).find('.modal');
modal.attr('id', modalId).attr('aria-labelledby', modalId)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
Incidentally - you don't actually need the data-target at all - just put that content into the a href attribute (and query that to get the contenfor the modal elements.
$('section').each(function(){
var modalId = $(this).find('a').attr('href').replace(/#/,'');
console.log(modalId);
var modal= $(this).find('.modal');
modal.attr('id', modalId).attr('aria-labelledby', modalId)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>
<section>
<div>
<ul>
<li>
Modal Trigger
</li>
</ul>
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
<p>modal content</p>
</div>
</div>
</section>

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) :

Issue on Tabbing Bootstrap 3 Tab Using Button Click

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

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