I have a modal that performs a count. Once the count is completed, the modal closes. My goal is to automatically switch to the next tab in Bootstrap when the modal closes.
Here is the HTML:
<ul class="nav nav-tabs namelocationtable">
<div class="tab-content">
<li><a data-toggle="tab" href="#one">one></a></li>
<li><a data-toggle="tab" href="#two">two></a></li>
<li><a data-toggle="tab" href="#three">three></a></li>
<div id="one" class="tab-pane fade in active">
<h1>One</h1>
</div>
<div id="two" class="tab-pane fade in">
<h1>Two</h1>
</div>
<div id="three" class="tab-pane fade in">
<h1>Three</h1>
</div>
</div>
</ul>
In tab 1, I trigger the modal to open. Upon closing the modal, I want to automatically switch to tab 2.
Jquery:
// Open the confirmation modal
$("#location-confirm-model").modal('show');
// Timer function and AJAX request
function count_down_timer_function() {
var sec = 5;
var timer = setInterval(function() {
if (sec == 0) {
clearInterval(timer);
$("#timer-container").text('Saving details, please wait...');
$("#location-confirm-model").modal('hide');
console.log(1);
$('.namelocationtable > .active').next('li').find('a');
console.log(2);
console.log(3);
}
$('#timer-container span').text(sec--);
},
1000);
// Cancel countdown and reset text
$('.cancel-fill').click(function() {
// Stop the countdown
clearInterval(timer);
// Reset timer
$('#timer-container span').text('5');
});
setInterval(timer);
}
count_down_timer_function();