Using jQuery to automate Bootstrap dynamic tabs - javascript

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/

Related

How can I open a bootstrap 3 tab from external link?

I want to create a link that will target a specific tab, in another page of my site.
I have tried to create link like this: www.example.com/test.html#tab2, but it always targets the first tab (I guess the tab with show class).
index.html
link for catalog
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
When I click the link from index.html to target and open the tab with the right ID.
If you're using the bootstrap + jquery setup, you can get this behavior pretty easily with the following:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});
Try this
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});

Get the ID of clicked element and use it as $(this)

I need to be able to click an element, get the ID of that element and use it on another function. How can I do it as It is not working using $(this). This is what I have so far:
$("#pills-ficha").on("click", closePillsOnClick);
function closePillsOnClick() {
var clickedId = $(this).attr("id");
var clickedIdChild = $(this).html($(this).html().split("By:").join(""));
if ($(clickedId).hasClass("active")) {
$(clickedId).removeClass("active show");
e.stopPropagation();
$(clickedIdChild).removeClass("active show").css("display", "none");
} else {
$(clickedIdChild).css("display", "block");
$(clickedIdChild).siblings().css("display", "none");
}
}
/* edit */
I'll add the markup:
<div class="d-flex flex-nowrap align-items-center">
<ul id="examples" class="nav nav-pills justify-content-center justify-content-lg-start" role="tablist">
<span class="text-blue font-weight-medium">EJEMPLOS:</span>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-ficha-tab" data-toggle="pill" href="#pills-ficha" role="tab" aria-controls="pills-ficha" aria-selected="false">Ficha</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-candidato-tab" data-toggle="pill" href="#pills-candidato" role="tab" aria-controls="pills-candidato" aria-selected="false">Mail candidato</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-empresa-tab" data-toggle="pill" href="#pills-empresa" role="tab" aria-controls="pills-empresa" aria-selected="false">Mail empresa</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-ficha" role="tabpanel" aria-labelledby="pills-ficha-tab">
<img src="img/gold/gold-ejemplo-ficha.jpg" alt="Ejemplo de ficha">
</div>
<div class="tab-pane fade" id="pills-candidato" role="tabpanel" aria-labelledby="pills-candidato-tab">
<img src="img/gold/gold-ejemplo-candidato.jpg" alt="Ejemplo de mail al candidato">
</div>
<div class="tab-pane fade" id="pills-empresa" role="tabpanel" aria-labelledby="pills-empresa-tab">
<img src="img/gold/gold-ejemplo-empresa.jpg" alt="Ejemplo de mail a la empresa">
</div>
</div>
</div>
The main issue with your logic is because attr('id') is returning you back pills-ficha, which in itself is not a valid selector. You would need to append # to it for it to work.
However this is a flawed approach. You already have the reference to the element itself through the this keyword. Creating a reference to that element to get its id to then get another reference to the same element by that id is entirely pointless.
As such, you can simplify the logic like this:
$("#pills-ficha").on("click", closePillsOnClick);
function closePillsOnClick() {
var $clicked = $(this);
var clickedIdChild = $clicked.html($clicked.html().split("By:").join(""));
if ($clicked.hasClass("active")) {
e.stopPropagation();
$clicked.removeClass("active show");
$(clickedIdChild).removeClass("active show").hide();
} else {
$(clickedIdChild).show().siblings().hide()
}
}
It's likely you can do the same with the clickedIdChild reference, but your HTML doesn't show enough information for me to give you an example of how to fix that.
The problem with my original question was this part:
var clickedIdChild = $(this).html($(this).html().split("By:").join(""));
It had to be:
var clickedIdChild = clickedId.split(":By").join("");
Also adding:
$("#"+clickedIdChild) as a selector.
Then this works as expected:
function closePillsOnClick(e){
var clickedId = $(this).attr("id");
var clickedIdChild = clickedId.split("-tab").join("");
if( $(this).hasClass("active") ){
$(this).removeClass("active show");
e.stopPropagation();
$("#"+clickedIdChild).removeClass("active show").css("display", "none");
} else {
$("#"+clickedIdChild).css("display", "block");
$("#"+clickedIdChild).siblings().css("display", "none");
}
};
OK let's clarify this. var clickedId = $(this).attr("id"); will return ID in the form fakeId. Next you have a jQuery with with the ID ($(clickedId)) which will be $('fakeId') in my example. ID selector needs to start with # so you have to add it. So valid code will be $('#' + clickedId). More here:
http://api.jquery.com/id-selector/
https://api.jquery.com/attr
Cheers.

How to open next bootstrap tab automatically

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

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>

how to make the tab is active in jquery based upon URL

here i am using tab it is fine,i want to make some extra changes , in my footer page i have 4 link , if i am click that link means URL should be like this ouroffice.php?cityname=chennai, now what i want to do means bassed upon the cityname i want to make the tab is active i tried but i am not able to make the tab is active,how can do this?
//var cityname = '<?php echo $_GET['cityname']?>';
var cityname = "hydrabad";
if (cityname == "chennai") {
$("#nv_li").tabs({
active: 1
});
} else if (cityname == "hydrabad") {
$("#nv_li").tabs({
active: 2
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-top: 30px;">
<ul class="nav nav-tabs" id="nv_li">
<li class="active" id="link"><a data-toggle="tab" href="#beng">BENGALURU</a>
</li>
<li id="link"><a data-toggle="tab" href="#chennai">CHENNAI</a>
</li>
<li id="link"><a data-toggle="tab" href="#hydrabad">HYDERABAD</a>
</li>
<li id="link"><a data-toggle="tab" href="#dubai">DUBAI</a>
</li>
<li id="link"><a data-toggle="tab" href="#london">LONDON</a>
</li>
<li><a data-toggle="tab" href="#kochi" style="border-right: 0px;">HONG KONG</a>
</li>
</ul>
<div class="tab-content">
<div id="beng" class="tab-pane fade in active">
<?php include 'bangalore.php';?>
</div>
<div id="chennai" class="tab-pane fade">
<?php include 'chhenai.php';?>
</div>
<div id="hydrabad" class="tab-pane fade">
<?php include 'hyd.php';?>
</div>
<div id="kochi" class="tab-pane fade">
<?php include 'kochi.php';?>
</div>
<div id="mumbai" class="tab-pane fade">
<?php include 'mumbai.php';?>
</div>
<div id="pune" class="tab-pane fade">
<?php include 'pune.php';?>
</div>
<div id="abu" class="tab-pane fade">
<?php include 'abu_dhabi.php';?>
</div>
<div id="dubai" class="tab-pane fade">
<?php include 'dubai.php';?>
</div>
<div id="london" class="tab-pane fade">
<?php include 'london.php';?>
</div>
</div>
</div>
Just use window.location.search and run function(on document ready) to set active class to appropriate li element, like so:
// Search parameter extractor
function getSearchParam(searchKey) {
var params = window.location.search.replace('?', '').split('&');
var searchParam = null;
var keyValue;
for (var i = 0, len = params.length; i < len; i++) {
keyValue = params[i].split('=');
if (keyValue[0] === searchKey) {
searchParam = keyValue[1];
break;
}
}
return searchParam;
}
// Function to set active city class
function setActiveCity(cityName) {
var link = document.querySelector('a[data-toggle="tab"][href="#' + cityName + '"]');
var content = document.getElementById(cityName);
if (link) {
link.parentNode.classList.add('active');
}
if (content) {
content.classList.add('in', 'active');
}
}
var city = getSearchParam('cityname');
if (city) {
setActiveCity(city);
}
<ul id="navi">
<li><a class="menu" href="#">Pune</a></li>
<li><a class="menu" href="#">Baramati</a></li>
<li><a class="menu" href="#">chennai T</a></li>
<li><a class="menu" href="#">London</li>
<li><a class="menu" href="#">UK</a></li>
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
I Hope. it will help you!

Categories

Resources