I am working on an application that loads a form inside of a bootstrap navtab. I have a datepicker that allows the user to enter a date click submit and update the data in the navtab. What I want to do is allow the user to select a date, and then when a tab is clicked it will use that date to display the data. As it is now, it will only work if the submit button is clicked. I know I need to change the code in my navtabs to match what I do when the button is clicked, but I'm not sure how to do it. Here is my navtabs:
<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" id="details">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Here is the button click JavaScript:
<script>
$(".spiffdate-btn").click(function(){
var correctId = $("ul.spiff_tabs li.active a").attr('data-id');
var endDate = $("#startDate").val();
if (endDate == "") {
} else {
if (correctId == "delayedspiff")
{
FormGet('dashboard/delayedspiff?endDate=' + endDate, 'delayedspiff')
} else if (correctId = "instantspiff") {
FormGet('dashboard/instantspiff?endDate=' + endDate, 'delayedspiff')
}
}
});
</script>
How do I change the navtab Formget function to match that of the button clicks formget function?
Apply the spiffdate-btn class to your tab links so that they will also trigger the same function as your submit button without the onclick attribute. You could use a random css class that is more generically named and doesn't apply css to your elements.
Related
Would like to use a basic hash router to drive navigation of bootstrap 4.6 tab component.
However when I call the .tab('show') function, the right tab toggles but it's respective tab-pane section does not get toggled. I made sure the tab-panes id attribute has the same value as the tabs href attribute.
I was able to make it work by manually showing and hiding the tab panes. But bootstrap has this functionality built in. Does anyone know how to do it ?
Thanks
hashRouteInit = function(callback) {
window.addEventListener('hashchange', callback, false);
}
const routes = {
'#/units': function() {
console.log('units');
},
'#/clients': function() {
console.log('clients');
},
'#/searches': function() {
console.log('searches');
},
};
hashRouteInit(function() {
console.log(window.location.hash);
console.log(routes);
if (routes[window.location.hash] != undefined) {
/*how can i remove the following 3 lines and let .tab('show') show the tab pane*/
/*$(`.tab-content .show`).hide();
$(`.tab-content .show`).removeClass('show');
$(`.tab-content .show`).removeClass('active');*/
$(`#stats-tabs a[href="${window.location.hash}"]`).tab('show');
/*how can i remove the following 3 lines and let .tab('show') show the tab pane*/
/*$(`.tab-content .tab-pane[id="${window.location.hash}"]`).addClass('show');
$(`.tab-content .tab-pane[id="${window.location.hash}"]`).addClass('active');
$(`.tab-content .tab-pane[id="${window.location.hash}"]`).show();*/
routes[window.location.hash]();
}
});
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container">
<ul class="nav nav-tabs" id="stats-tabs" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active" id="units-tab" href="#/units" role="tab" aria-controls="units" aria-selected="true">Units</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="clients-tab" href="#/clients" role="tab" aria-controls="clients" aria-selected="false">Clients</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="searches-tab" href="#/searches" role="tab" aria-controls="searches" aria-selected="false">Searches</a></li>
</ul>
<div class="tab-content pt-2" id="stats-tabs-content">
<div class="tab-pane fade show active" id="#/units" role="tabpanel" aria-labelledby="units-tab">units</div>
<div class="tab-pane fade" id="#/clients" role="tabpanel" aria-labelledby="clients-tab">clients</div>
<div class="tab-pane fade" id="#/searches" role="tabpanel" aria-labelledby="searches-tab">
<div id="search-overview-searches">searches</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
Apparently the HTML ID attribute has to start with a letter(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)
Once I set the href attributes to #name and used the same value but without the number sign for the ID of the tab pane. It started working.
Note that the spec(https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#:~:text=The%20id%20attribute%20specifies%20its,not%20contain%20any%20space%20characters.) doesn't say anything about not using slashes to construct a hierarchy in the id string. However if i want to have another tab section as a child in a tab pane, i won't be able to have an id like this(parent/child) and have bootstrap tabs work. So you are only left with - or _ which doesn't seem so intuitive in the URI. Especially once you wan't to add an numerical identifier onto it. Like so parent/child/3. Can't do that, but the spec doesn't say anything about not allowing slashes.
Does anyone know why forward slashes are not allowed in the id string if the first char is not a forward slash?
I'm trying to add a Bootstrap tab panel goes like this:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
Now I need to give link to users to see the panes like this:
https://sitename.com/page#tabs-2
But this won't work because the tab-pane with an id of tabs-2 does not have the .active class.
However, if I try loading https://sitename.com/page#tabs-1 The page properly redirects me to tab-pane with an id of tabs-1 (because it has .active class by default)
So how can I redirect users to different tab panes correctly?
You don't really need to check the fragment to switch between those tabs.
1) Import jQuery from here or:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
2) Add this part to your code.
<script>
$(document).ready(function () {
$('.nav-tabs a').click(function () {
$(this).tab('show');
});
});
</script>
I already started answering your old question before you deleted it, but here is it again.
I didn't understood what you were trying to achieve, so I just looked into the code and made my version, its not the best but it works.
This is an onClick event handler, it gets executed on a click in your nav and changes the active classes.
// onClick event handler, gets executed on click
$(".nav-link").on("click", (e) => {
// store clicked element
const listItem = e.target;
// get hash
const hash = e.target.hash;
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to list item and tab panes
$(listItem).add(hash).addClass("active");
});
This part gets executed when you reload your page. You need to change your HTML for this to work, so remove the active class from nav-link and give every link an additional class (tabs-1, tabs-2 and tabs-3).
// when page is reloaded
$(document).ready(() => {
// get current hash
const hashList = window.location.hash;
const hashItems = hashList.slice(1);
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to nav-link and pane
$(hashList).add(`.${hashItems}`).addClass("active");
});
Both snippets need to be included in your script tag of course, also you need to import jQuery, if not already happened.
I have a service page that using bootstrap 4's pills .nav-pills navigation (this is not the main navigation navbar), which is working very well. My challenge is that i want to be able to click on a link on the home page that should open the targeted tab-panel on the service page. Haven't been able to find a way for almost a week now. How can i achieve this?
Service.html
<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
<li class="nav-item">
<a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Supply</a>
</li>
</ul>
</div>
<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
<h5>Man Power Supply</h5>
</div>
Home.html
<a href="services.html#v-pills-manpower" data-toggle="tab" >
My code in home.html doesn't work but that's one of my many attempts.
On the home page, configure data attributes to help. I've added data-tab-name to the anchor and it defines the desired, selected tab for the service page.
When the page loads, it re-configures the onclick of the link so that the tab name can be stored in localStorage before redirecting the user to the service page.
Home.html
<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
item.addEventListener('click', function(e){
e.preventDefault();
localStorage.selectedTabName = item.getAttribute('data-tab-name');
window.location.href = item.href;
});
});
};
</script>
When the service page loads, the javascript looks for the saved tab name in localStorage, identifies that tab and then makes it the active tab by applying the "active" class to the appropriate element.
Service.html
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('.nav-link').forEach(function(item, index){
var isActive = (item.className.indexOf('active')>-1);
if (item.id==localStorage.selectedTabName) {
if (!isActive) {
item.className += ' active';
}
item.setAttribute('aria-selected', 'true');
} else {
item.setAttribute('aria-selected', 'false');
if (isActive) {
item.className = item.className.replace('active', '');
}
}
});
};
</script>
I am using a bootstrap tabpanel like this:
<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>
Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.
Updated:
I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.
I need to do something like this:
<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 == "instantspiff") {
alert("instantspiff");
}
else {
alert("delayedspiff");
}
</script>
check this
var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
alert("delayedspiff");
}
else {
alert("instantspiff");
}
when they click on a tab add this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
I have a pie chart. Functionality is that when I select a particular section of pie chart, then it redirects to the next page with selected tab. I am able to get value of that pie chart section by using this code:
var search = document.URL.split('?')[1];
Now my fight is how to enable particular tab on the next page on the basis of value of "search" variable.
Next when user comes direct to this page then 1st tab is enable by default. for this I used the code:
<div class="tab-pane in active" id="tab1">
I have tried in many ways(like $("ul.tabs li:first").addClass("active").show() or using eq()) but have no success. Please let me know if anyone can help me out.
This should do the job:
<script>
$(function() {
$("#tabs").tabs();
var search = document.URL.split('?')[1];
switch (search) {
case "error":
$("#tab1 > a").click();
break;
case "suspect":
$("#tab2 > a").click();
break;
}
});
</script>
<div id="tabs">
<ul class="nav nav-tabs" id="myTab">
<li id="tab1" class="active"> Error</li>
<li id="tab2"><a href="#suspect" data-toggle="tab" >Suspect </a></li>
</ul>
<div class="tab-pane in active" id="error">
Error
</div>
<div class="tab-pane" id="suspect">
Suspect
</div>
</div>