Develop Reference

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?

jQuery Tab Menu Set Active Menu and load the content

I have jQuery tab menu call ajax.
Menu is working perfect, but now I want when page loaded it always show the first tab to be loaded (means active).
You can see the fiddle here: https://jsfiddle.net/waspinator/rw8ujfg3/
<ul class="nav nav-tabs tabs-up " id="friends">
<li active> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
JS
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
In this case, I want Contact content loaded on page loaded. How can set this?

$('#contacts_tab').trigger('click'); if you are allowed to use the id.

This should work. Just abstract the function, and bind it to the event, but also call it on load with the first tab selected to call it on. (EDIT: Sorry I got the spacing on your function wrong before because I mis-copied it. Also, tested it and changed a few things to work out a kink or two.)
function doAjaxStuff(event, tab) {
var $this = tab || $(this)
var $this = tab || $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
}
doAjaxStuff(null, $('.nav-tabs li:first-child a'))
$('[data-toggle="tabajax"]').click(doAjaxStuff);

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/

Bootstrap - Dynamically added nested tabs

I just started learning front-end development & really need help with a practice project.
I am trying to create 2-layers nested tabs where the user can add tabs on the outer layer. Each outer tab will have inner tabs where the user can also add more inner tabs. Each tab will have the same content for now, so I'm using an iframe to accomplish this - if you have better suggestion, then I would very much like to hear it.
The issue I'm having right now is that I don't know how to bind the inner tabs to the outer tabs. Each of the outer tabs should have different number of tabs depending on how many inner tabs the user creates. I cannot seem to accomplish this & all of my outer tabs currently have the same inner tabs.
Any help/input would be very much appreciated! Thanks.
Here's my code snippet:
<div class="container">
<!-- top level tabs -->
<ul class="nav nav-tabs" id="topNav">
<li class="active">Home<span>x</span></li>
<li>+ Add Tab</li>
</ul>
<div class="tabbable">
<!--bottomNav -->
<ul class="nav nav-tabs" id="bottomNav">
<li class="active">Test<span>x</span></li>
<li>+ Add Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bottom1"><br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0"></iframe></div>
</div>
</div>
</div>
My script:
$(document).ready(function() {
$(".nav-tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
.on("click", "span", function () {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
});
/* Adding New Tabs */
$('.addTop').click(function(e) {
e.preventDefault();
var id = $("#topNav").children().length;
$(this).closest('li').before('<li>#'+ id + '<span>x</span></li>');
// $('.tab-content').append('<div class="tab-pane" id="top'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>');
});
$('.addBottom').click(function(e) {
e.preventDefault();
var id = $("#bottomNav").children().length;
$(this).closest('li').before('<li>#'+ id + '<span>x</span></li>');
$('.tab-content').append('<div class="tab-pane" id="bottom'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>');
});
});

There are ready made sollutions out there, but let us leave it for others to suggest.
In reply to your issue: Your addTop.onclick event only adds a new tab, but does not create new content.tabbable for the said tab.
When you ad a new tab you have to do 3 things:
create a new tab.
create a new content for the new tab.
associate event.
Obviously you missed number 2 & 3.
Example:
$('.addTop').click(function(e){
e.preventDefault();
// create new tab
var newTab = $('<li>New Tab</li>');
$('#topNav').append(newTab);
// create new content for the new tab
var newTabContent = $('<div class="tabbable"></div>').hide();
$('.container').append(newTabContent);
// associate tab to content
newTab.click(function(){
newTabContent.show();
// hide others
$('.container > .tabbable').hide();
});
});

Hope this could help. This is the solution without using iframe
You can see the effect in jsfiddle link below:
http://jsfiddle.net/Lzfsgeq9/
Basically some points you need to be aware of are:
1.Use ahref to direct you subtab from parent tab
2.Use "on" event listener to deal with newly created element about event delegation issue
<div class="tabbable boxed parentTabs">
<ul id="topNav" class="nav nav-tabs">
<li class="active">Tab 1
</li>
<li>Tab 2
</li>
<li>+ Add Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="top1">
<div class="tabbable">
<ul id="bottomNav1" class="nav nav-tabs" data-parent="1">
<li class="active">Tab 11
</li>
<li>Tab 12
</li>
<li>+ Add Tab</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="top2">
<div class="tabbable">
<ul id="bottomNav2" class="nav nav-tabs" data-parent="2">
<li class="active">Tab 21
</li>
<li>Tab 22
</li>
<li>+ Add Tab</li>
</ul>
</div>
</div>
</div>
$("ul.nav-tabs").on("click","a",function (e) {
e.preventDefault();
$(this).tab('show');
});
$('.addTop').click(function(e) {
e.preventDefault();
var id = $("#topNav").children().length;
$(this).closest('li').before('<li><a href="#top'+id+'">Tab'+ id + '</li>');
createNewSubTab(id);
});
$('div.tab-content').on("click",".addBottom",function(e) {
e.preventDefault();
var parentId = $(this).closest('ul').data("parent");
var id = $("#bottomNav" + parentId).children().length;
$(this).closest('li').before('<li><a href="#bottom'+parentId+id+'">Tab'+ parentId + id + '</li>');
});
var createNewSubTab = function(id){
var bottomTabPane = $("<div></div>").attr({
id: "top" + id,
"class": "tab-pane fade"
});
var tabContainer = $("<div></div>").attr({
"class":"tabbable"
});
var bottomPanel = $("<ul></ul>").attr({
id:"bottomNav"+id,
"class":"nav nav-tabs",
"data-parent": id
});
var bottomAdd = $("<li></li>").append("<a href='#' class='addBottom' data-toggle='tab'>+ Add Tab</a>");
bottomTabPane.append(tabContainer);
tabContainer.append(bottomPanel);
bottomPanel.append(bottomAdd);
$(".tab-content").append(bottomTabPane);
}

Bootstrap 3: return to dropdown tab on page refresh

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