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?
I'm using the Flexy template (using bootstrap) and I can't get the shown.bs.tab event on tab to work.
I've managed to make it work on JSFiddle.
Here is the code I use in my template that produce nothing :
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert(e.target.href);
})
});
</script>
What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !
Bootstrap tab events are based off the .nav-tabs elements, not the .tab-content elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1 content element itself.
So instead of this:
$('#tab1').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Do this instead:
$('[href=#tab1]').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Or, to capture all of them, just do this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
Demo in Stack Snippets
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
If the Tab is dynamic in anyway try using
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
})
In my case, there was a conflict between Jquery and Bootstrap.
I solved the problem with jQuery.noConflict(). See below!
I hope that helps!
// Issue # tabs toggle
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
});
The issue was more a rails-related one.
I ended up by removing one by one every piece of code since the issue was not there in the raw template as #KyleMit says.
Whenever I remove the line //= require bootstrap-sprockets from my application.js file the issue disappears !
The issue was that I was requiring both bootstrap and bootstrap-sprockets. I should have require just one of them but not both.
The issue I faces was that I had 2 sets of tabs on my page. and I had already bound the 1st tab set with
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
For the 2nd tab set also i had defined the same way.. but I had assigned an id to the ul and bound the click element as:
$('#tabId > li > a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
The 1st tab was working here but the 2nd wouldn't work. I then figured it out and assigned id's to both uls.. now it works
Try this, it's simple and listen to the only Tab you need :
$('a[href="#idTab"]').on('shown.bs.tab', function (e) {
`console.log('this tab is shown');`//or do something else
}
In my case, the bootstrap event 'shown.bs.tab' failed to fire using the above solutions. So, I decided to enable tabbable tabs via javaScript.
const adjustColumnHeaders = () => {
window.setTimeout(() => {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
}, 200);
};
const boostrapTabs = $('a[data-bs-toggle="tab"]');
boostrapTabs.click(function () {
$(this).tab("show");
adjustColumnHeaders();
});
$(document).ready(function () {
const tabLink = $(`a[href=${'"' + window.location.hash + '"'}]`);
if(tabLink.length) tabLink.trigger( "click" );
});
Then in your HTML markup, rename data-toggle="tab" to data-bs-toggle="tab".
I.e:
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-employees">
Employees
</a>
</li>
I would like to load a different URL into my Laravel View when I press a Nav Tab. There is currently three tabs Home, Profile, Messages
This is my JS
<script>
$('#myTabs a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});
// load first tab content
$('#home').load($('.active a').attr("data-url"),function(result){
$('.active a').tab('show');
});
</script>
I'm using Bootstrap to style my app
<ul class="nav nav-tabs" id="myTabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">#include('Partials.FilterBar', array('action' => Str::slug(head(Request::segments()))))</div>
<div class="tab-pane" id="profile"></div>
<div class="tab-pane" id="messages">sdfsdfsdfsdf</div>
Currently when I press Profile it should load /custom.html, but nothing gets loaded. When I press Messages it should load sdfsdfsdfsdf, but nothing gets loaded. Any help would be appreciated.
I want to return the user to content that was reached by accessing a dropdown link from a bootstrap pill menu.
This question is similar to this one - but the wrinkle is that that solution does not work when the link is in a dropdown menu.
I have koppor's solution working fine as it relates to the pills themselves, but I'm stumped how to return to the same view after refresh when the content is accessed from the dropdown.
Specifically, when you navigate to the 'xxx' or 'yyy' content from the "Misc" menu, then refresh the page, the page defaults to the "home" content (even though the 'Misc' pill is still active).
<ul class="nav nav-pills" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#misc">Misc<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-toggle" href="#more_x" data-toggle="pill">xxx</a></li>
<li><a class="dropdown-toggle" href="#more_y" data-toggle="pill">yyy</a></li>
</ul>
</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="more_x">more info x</div>
<div class="tab-pane" id="more_y">more info y</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
// store the currently selected tab in the hash value
$("ul.nav-pills > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
Any/all suggestions welcomed!
I had a similar issue. What I did was create a hidden tab. When the page loads go to that tab first then load the tab you really want to load (what is in your hash).
Edit:
I was thinking of it differently. Try changing your script to this. It should set window.location.hash to the active tab whenever one is clicked.
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
window.location.hash = $(this).attr("href");
});
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
With bootstrap-tab.js I want to activate a tab, calling it from within another function.
Html:
<a onClick='activate_tab()'>Activate Tab</a>
<ul class='nav nav-tabs hydro' id='nav_tabs'>
<li class='active'><a href='#1' data-toggle='tab'>First</a></li>
<li class=''><a href='#2' data-toggle='tab'>Second</a></li>
<li class=''><a href='#3' data-toggle='tab'>Third</a></li>
</ul>
<div class='tabbable'>
<div class='tab-content'>
<div class='tab-pane active' id='1'>content first</div>
<div class='tab-pane ' id='2'>content second</div>
<div class='tab-pane ' id='3'>content third</div>
</div>
</div>
I am able to activate the tab on page load with the following:
<script>jQuery(function($){$('#nav_tabs li:eq(2) a').tab('show');})</script>
And the tabs activate properly by clicking on the respective anchor elements. The following does not work:
function activate_tab(){
//process other data...then goto tab
alert(1);
$('#nav_tabs li:eq(2) a').tab('show');
alert(2);
}
I am new to javascript/jQuery.
[EDIT] I stripped the original page down to just what's shown above and it works. So, likely a conflict with other functions. Sorry to waste your time.
try this if you dont
<script>
jQuery(function($){
function activate_tab(){
//process other data...then goto tab
alert(1);
$('#nav_tabs li:eq(2) a').tab('show');
alert(2);
}
});
</script>