How to open next bootstrap tab automatically - javascript

I have an modal; which does the count. After the count the modal closes. What I want to achieve how to close the next bootstrap soon when modal closes.
Here is 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>
I do something in tab 1- modal appear; but when modal close; I want automatically to going to tab 2.
Jquery
//opent the confirmation modal
$("#location-confirm-model").modal('show');
//Timer function and the 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 count down and text
$('.cancel-fill').click(function() {
//Stop the countdown
clearInterval(timer);
//Reset timer
$('#timer-container span').text('5');
});
setInterval(timer);
}
count_down_timer_function();

Assuming you are using bootstrap 3 (please clarify what bootstrap version you're using), you can do
$('#location-confirm-model').on('hidden.bs.modal', function () {
$('.nav-tabs a[href="#two"]').tab('show');
})

Related

How to stay on selected tab

i know there are a lot themes about that, but i dont know why, noone of them are working
I am using AdminLTE3, i have tabs, i want to stay on selected tab after refresh
my code (not working, but should work):
#extends('adminlte::page')
#section('title', 'Mans Profils')
#section('content_header')
#stop
#section('content')
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
#stop
#section('css')
#stop
#section('js')
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).attr('href'));
});
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
#stop
No need to use localsStorage for that sake. just put condition over window.location.search
whichever tab has been clicked append window.location.search with that tab variable.
on reload check whether window.location.search string contains your tab variable then call the same code which is inside your tab click.

Open previous tab when reloading

I'm having an issue with my site. It has a page with two tabs. In the second tab, there is a pagination and I'm using bootstrap. The issue I'm having is when I click a different page on the pagination, it goes back to the 1st tab.
I have tried to fix it using hash links. When I do that, it flashes the 1st tab for milliseconds and then shows the 2nd tab which is not what I want. I want it to show the same tab even after clicking the pagination. Also, note that I'm using Ajax.
<ul class="nav nav-tabs" id="resumes-tab">
<li class="active"><a data-toggle="tab" href="#shortlisted-resumes-list" aria-expanded="true">Shortlisted</a></li>
<li class=""><a data-toggle="tab" href="#download-resumes-list" aria-expanded="false">Downloads</a></li>
</ul>
<div class="tab-content">
<div id="shortlisted-resumes-list" class="tab-pane fade active in">
<div class="cs-resumes" data-adminurl="https://example.com/wp-admin/admin-ajax.php"></div>
</div>
<div id="download-resumes-list" class="tab-pane fade">
<div class="cs-resumes" data-adminurl="https://example.com/wp-admin/admin-ajax.php">
<nav>
<ul class="pagination">
<li><a aria-label="Previous"><span aria-hidden="true"><i class="icon-angle-left"></i>Previous</span></a></li>
<li><a class="active">1</a></li>
<li><span aria-hidden="true">Next <i class="icon-angle-right"></i></span></li>
</ul>
</nav>
</div>
</div>
</div>
Here's my jQuery snippet
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "";
if (hash) {
jQuery('.nav-tabs a[href="' + hash.replace(prefix, "") + '"]').tab('show');
}
// Change hash for page-reload
jQuery('.nav-tabs a').on('shown.bs.tab', function (e) {
var hash = document.location.hash;
window.location.hash = e.target.hash.replace("#", "#" + prefix);
jQuery("html, body").animate({ scrollTop: $(".cs-dash-resumes-tabs").offset().top }, "slow");
});
</script>
Why does this happen? Because I'm using Ajax?

dynamically load file to html tab content

I am trying to load the tab contents dynamically from different html page. When I click EROs tab it should display the contents from /SVB/Tax_Eros.html file without reloading the page. Likewise when Import tab is clicked it should display the contents from /SVB/Tax_Imports
<ul class="nav nav-tabs">
<li class="active" >
EROs
</li>
<li>
Imports
</li>
<li>
Accounting
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">
<script>
$('#eros').click(function(){
$('#Taxeros').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="imports">
<script>
$('#imports').click(function(){
$('#Taximports').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="accounting">
<script>
$('#accounting').click(function(){
$('#Taxaccounting').load($(this).attr('href'));
});
</script>
</div>
</div>
Since you are using Bootstrap Tabs (3.3.7) you will need to modify your markup as Bootstrap expects certain conventions for it to do its magic without configuring a bunch of JS.
Instead of placing the page you need to load in the href attribute we place it in a custom data-src attribute. Bootstrap expects the value of the href attribute to be the ID of the tab pane associated with the tab. We also added data-toggle="tab" as that is required for Bootstrap Tabs to function.
It looked like you were trying to load content on tab click but that isn't useful for the default tab and it's tab pane as there won't be any content in it initially. So we've passed a function to jQuery that will get executed when the DOM is ready. This function will parse the tabs and load content into the tab panes based on the attribute values.
$(function() {
$('.nav-tabs a').each(function(index, el) {
var $this = $(this);
var pane = $this.attr('href');
var src = $this.data('src');
$(pane).load(src);
});
});
<ul class="nav nav-tabs">
<li class="active">
<a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
</li>
<li>
<a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
</li>
<li>
<a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">1</div>
<div class="tab-pane" id="imports">2</div>
<div class="tab-pane" id="accounting">3</div>
</div>
As far as I know, Stack Snippets cannot mock Ajax requests so here's a JSFiddle and a Plunker that do.
$(function() {
$('.nav-tabs a').each(function(index, el) {
var $this = $(this);
var pane = $this.attr('href');
var src = $this.data('src');
$(pane).load(src);
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<ul class="nav nav-tabs">
<li class="active">
<a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
</li>
<li>
<a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
</li>
<li>
<a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">1</div>
<div class="tab-pane" id="imports">2</div>
<div class="tab-pane" id="accounting">3</div>
</div>
<html>
<head>
<script type='text/javascript'>
function clicks () {
var myButtons = document.querySelectorAll('.eros') || null;
if (myButtons != null){
for (var i = 0; i < myButtons.length; i++){
myButtons[i].addEventListener('click', function () {
var url = this.getAttribute('data-href'); // location to load
var obj = this.getAttribute('data-id');//id to append content
var type = 'GET'; /*-> post or get-> if is 'post' page must be in Php or other server language*/
data = '';
var objElm = document.querySelector('#'+obj) || null;
if (objElm === null){console.log('no element to write content'); return;}
xmlRequest (url, type, data, obj)
}, !1);
}
}
}
function xmlRequest (url, type, data, obj){
var xhr = new XMLHttpRequest || null;
if (chr === null){console.log('Obsolete browser');return;}
xhr.addEventListener('load', function () {
if (this.status == 200 && this.readyState == 4){
obj.innerHTML = this.responseText;
}
else {console.log('Error')}
}, !1);
xhr.open(type, url);
xhr.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');
xhr.send(data)
}
</script>
<script type='text/javascript'>
window.addEventListener('load', function () {
clicks ();
}, !1)
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active" >
<a data-href="/SVB/Tax_Eros" data-toggle="tab" data-id="eros" class="eros">EROs</a>
</li>
<li>
<a data-href="/SVB/Tax_Imports" data-toggle="tab" data-id="imports" class="eros">Imports</a>
</li>
<li>
<a data-href="/SVB/Tax_Accounting" data-toggle="tab" data-id="accounting" class="eros">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros"> </div>
<div class="tab-pane" id="imports"></div>
<div class="tab-pane" id="accounting"></div>
</div>
</body>

Using jQuery to automate Bootstrap dynamic tabs

I have the following code for a set of dynamic bootstrap tabs:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Me</a></li>
<li><a data-toggle="tab" href="#menu1">AAA</a></li>
<li><a data-toggle="tab" href="#menu2">BBB</a></li>
<li><a data-toggle="tab" href="#menu3">CCC</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3><u>Me</u></h3>
<p>Content</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3><u>AAA</u></h3>
<p>content</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3><u>BBB</u></h3>
<p>content</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3><u>ccc</u></h3>
<p>content</p>
</div>
I want to know if there's a jquery that will automate them after say, 5 seconds to shift to the next tab then revert back to the beginning and loop?
Here is a small script the might give you an idea:
var i = 0;
setInterval(function(){
var content = $(".tab-pane");
var menu = $(".nav-tabs li");
var prev = (i%(content.length))-1;
var curr = i%(content.length);
if(curr != 0){
$(menu[prev]).removeClass("active");
$(menu[curr]).addClass("active");
$(content[prev]).removeClass("in active");
$(content[curr]).addClass("in active");
}else{
$(menu[menu.length-1]).removeClass("active");
$(menu[0]).addClass("active");
$(content[content.length-1]).removeClass("in active");
$(content[0]).addClass("in active");
}
i++;
},1000);
Working fiddle : https://jsfiddle.net/mt9n1dbs/
Update:
I actually got a better solution for this:
var i = 0;
setInterval(function(){
var menu = $(".nav-tabs li");
var curr = i%(menu.length);
if(curr != 0){
$(".nav-tabs > .active").next('li').find('a').trigger('click');
}else{
$(menu[0]).find('a').trigger('click');
}
i++;
},1000);
Working fiddle 2 : https://jsfiddle.net/mt9n1dbs/1/

Bootstrap nav-tabs check for selected tab using jquery

I have the following Bootstrap nav tabs:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
I need to be able to check which tab is selected and then display an alert. I have the following javascript in my view:
<script>
$(function () {
FormGet('dashboard/delayedspiff', 'delayedspiff');
});
</script>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
var id = $('.tab-content .active').attr('id');
if (id == "delayedspiff") {
alert("delayedspiff");
} else {
alert("instantspiff");
}
});
</script>
When I click the tabs it works, but the alert always displays delayedspiff. I need to dislay instantspiff when they click on the instantspiff tab. Can anyone see what I'm doing wrong?
You just need to remove class active from all tabs and add it to the tab which was clicked.
EDIT: In order to get the id of clicked tab, try using an attribute data-id on the tab selections.
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var wrongid = $('.tab-content .active').attr('id');
$('a[data-toggle="tab"]').removeClass("active"); // remove class active from all tabs
$(this).addClass("active"); // add class active to the current tab
var correctid = $(this).data("id"); // get the attribute data-id of the clicked tab
alert($('.tab-content .active')[0].outerHTML); // shows why you are getting the incorrect id
if (correctid == "delayedspiff")
alert("delayedspiff");
else
alert("instantspiff");
});
</script>
Updated fiddle : https://jsfiddle.net/DTcHh/14313/

Categories

Resources