I have a bootstrap tab that loads dynamic page content inside it with pagination . I am using codigniter framework . The flowing jquery works fine loading content in specific tab but what i have noticed in firebug that whenever i switch to another tab and then get back to previous one then it loads the tab content again .
How can i prevent loading the previous tab from loading again when clicked .
Here is my page ..
<div class="tabbable">
<ul class="nav nav-tabs" id="myTabs">
<li id="home">Home</li>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home"></div>
<div class="tab-pane" id="get_all_division"></div>
<div class="tab-pane" id="get_all_district"></div>
</div>
</div>
<script>
$(function() {
var baseURL = 'http://allinfo/area/';
//load content for first tab and initialize
$('#get_all_division').load(baseURL+'get_all_division', function() {
$('#myTabs').tab(); //initialize tabs
});
$('#get_all_division').on('click', 'a.page', function() {
$('#get_all_division').load($(this).attr('href'));
return false;
});
$('#get_all_district').load(baseURL+'get_all_district', function() {
$('#myTabs').tab(); //initialize tabs
});
$('#get_all_district').on('click', 'a.page', function() {
$('#get_all_district').load($(this).attr('href'));
return false;
});
$('#myTabs').bind('show', function(e) {
var pattern=/#.+/gi //use regex to get anchor(==selector)
var contentID = e.target.toString().match(pattern)[0]; //get anchor
//load content for selected tab
$(contentID).load(baseURL+contentID.replace('#',''), function(){
$('#myTabs').tab(); //reinitialize tabs
});
});
});
</script>
you could use .empty() to remove the loaded content once the tab is hidden using a callback, or when another tab is clicked
$('#get_all_district').load(baseURL+'get_all_district', function() {
$('#get_all_division').empty();
$('#myTabs').tab(); //initialize tabs
});
Related
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 am working on a L5 project and i am using a Jquery tab for one of its pages. I have a little menu for reaching tab contents without clicking just tabs.
<div id="aracislem" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Araç Arama </li>
<li>Araç Kayıt </li>
<li>İstatistik </li>
<li>Araç Takibi </li>
</ul>
</div>
</div>
Any my tab is
<script type="text/javascript">
$(document).ready(function () {
$('#tab-container').tabs({
active: $.cookie('activetab'),
activate: function (event, ui) {
$.cookie('activetab', ui.newTab.index(), {
expires: 10
});
}
});
});
</script>
<div id="tab-container" class='tab-container'>
<ul>
<li class='tab'>Araç Arama</li>
<li class='tab'>Araç Kayıt</li>
<li class='tab'>İstatistik</li>
<li class='tab'>Araç Takip</li>
</ul>
<div class='panel-container'>
<div id="aracaramatab">
Araç Arama
</div>
<div id="arackayittab">
Araç Kayıt
</div>
<div id="istatistiktab">
İstatistik
</div>
<div id="aractakiptab">
Araç Takip
</div>
</div>
</div>
When i clik to menu links i cant reach to necessary tab, link changes in the browser but does not redirect to tab also when i click to tabs, content changes but links do not change. Anybody knows what am i doing wrong ?
Check this DEMO : http://jsfiddle.net/yeyene/mktgnp3e/1/
Your problem is when you click link and after going to link (it will redirect a different page?), want to active the tab, right?
So get the url first, then get the hash, then do the active tab step.
JQUERY
$(document).ready(function () {
$("#tab-container").tabs({});
// for testing purpose
var url = "http://localhost/pages/aracislemler#arackayittab";
// use this script for getting url
//var url = window.location.href;
var hash = url.substring(url.indexOf('#'));
// trigger click to tab with url hash name
$('#tab-container a[href='+hash+']').trigger('click');
});
*Use the line var url = window.location.href; for your app, then take out the current url getting test variable.
In my page i use bootstrap's tab, but when i click each of tab, content of tab doesn't show correctly, this is my code:
<div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active">Home</li>
<li>Favoriets</li>
<li>Friends</li>
<li>Experience</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab-home">
HOME
</div>
<div class="tab-pane fade active" id="tab-fav">
My favoriets
</div>
<div class="tab-pane fade active" id="tab-fr">
My Friends
</div>
<div class="tab-pane fade active" id="tab-ex">
My experience
</div>
</div>
<script type="text/javascript">
$(function () {
var navTabs = $('.nav-tabs a');
var hash = window.location.hash;
hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
navTabs.on('shown', function (e) {
var newhash = $(e.target).attr('data-value');
window.location.hash = newhash;
});
})
</script>
</div>
JSFIDDLE
Where am i wrong? How can i fix it?
You have active class on all tab-pane divs. Remove it from all of them but the first one. BTW, in bootstrap 3, the event it is not show, it is shown.bs.tab Bootstrap 3 tabs.
I personally use this code: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink, the only change I made, was to replace the on('show' with on('shown.bs.tab' .
On your JSFiddle a reference to the jQuery library is missing. Once adding a jQuery reference under Frameworks & Extensions it's switching tab content.
Under the Bootstrap documentation is states that jQuery is required for bootstrap javascript features: http://getbootstrap.com/getting-started/#whats-included
Also, your function is being using jQuery notation.
My html for a tabbed menu and its content:
<div class="tab-menu"> <!-- menu -->
<ul>
<li>link to tab 1</li>
<li>link to tab 2</li>
<li>link to tab 3</li>
</ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
<div id="tab1" class="tab">first tab content</div>
<div id="tab2" class="tab">second tab content</div>
<div id="tab3" class="tab">third tab content</div>
</div>
... and the script to make the menu work is
// Displays the first tab when
$(".tabs").each(function(){
$(this).find(".tab").hide();
$(this).find(".tab-menu li:first a").addClass("active").show();
$(this).find(".tab:first").show();
});
$(".tabs").each(function(){
$(this).find(".tab-menu a").click(function() {
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
$(this).parent().parent().parent().parent().find(".tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
The menu works when user clicks a tab. This means the menu opens up with the first <div> visible by default and when the user clicks another tab, that corresponding <div> appears just as expected. However, when I type in the url mysite/path#tab2, it still opens up with tab1 open. What do I need to do to make it open with tab2? Specifically, how do I access the url and extract the label? I want to do this in javascript
EDIT: It seems document.location.href provides the full url. How do I parse and extract the label from this url?
When the page is loaded, check the location.hash property and behave consequently:
$(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
Better than that, don't register any click listener at all, and just use the hashchange event:
$(window).hashchange(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});