bootstrap pill not "tabbing" content - javascript

I am setting up bootstrap pills on a page and am using the http://getbootstrap.com/javascript/#tabs-usage standard formula but I'm getting the function is not a valid function error message. I have:
<ul class="nav nav-pills" role="pilllist" id="myPill">
<li role="presentation" class="active">Show all</li>
<li role="presentation">Cars</li>
</ul>
<div class="pill-content">
<div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
<div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>
<script>
$(function () {
$('#myPill a:last').pill('show')
})
</script>
Why am I getting this error message?

You're using .pills('show'); where you should be using .tab('show'); as seen below:
$(function () {
$('#myPill a:last').tab('show')
});
Also, your HTML is incorrect for pills:
<ul class="nav nav-pills" role="tablist" id="myPill">
<li role="presentation" class="active">Show All</li>
<li role="presentation">Cars</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>
<div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>
Basically, the only mentions of pill you should have is your ID (as its name doesn't matter) and .nav-pills. Everything else should be tab, ie tabpanel, .tab-pane, etc.
Lastly, the reason you're getting an undefined function error is that .pills() isn't a fucntion.
Take a look at this Bootply to see how the tabs work.

Related

Getting two bootstrap tabs to work on a single page and accessing the active tab on submit

I have two bootstrap tab components on my page
The first one has two tabs and the second one has three.
The simplified code is as below..
<div class="col-md-12">
<ul id="tab1" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab A</li>
<li role="presentation">Tab B</li>
</ul>
<div id="tab1content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="taba">
Tab A
</div>
<div role="tabpanel" class="tab-pane" id="tabb">
Tab B
</div>
</div>
</div>
<div class="col-md-12">
<ul id="tab2" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab X</li>
<li role="presentation">Tab Y</li>
<li role="presentation">Tab Z</li>
</ul>
<div id="tab2content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tabx">
Tab X
</div>
<div role="tabpanel" class="tab-pane" id="taby">
Tab Y
</div>
<div role="tabpanel" class="tab-pane" id="tabz">
Tab Z
</div>
</div>
</div>
<input type="submit" value="Submit" class="btnspl" style="max-width:100%" />
On submit button press I need to find out the active tab in both the components of the page.
I found this code in bootstrap site.. but it is for a single tab..
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
What changes would be needed when there are two bootstrap tab components.
jsfiddle(not working) : http://jsfiddle.net/52VtD/13447/
Any help is sincerely appreciated
Thanks
If I'm understanding it right you need to know which tab is active in both the components when "submit" button is correct. To get it you can use following code in button's click handler:
var x=$("#tab1content div.active").prop("id");
var y=$("#tab2content div.active").prop("id");
$("#log").text("TAB 1: "+ x +"\r\nTAB 2: "+ y);
x and y contains the id of selected/active tab in respective tab components. Here is working fiddle.
For getting the currently active tab you can check within click event of submit button hasClass(".active").attr("id").
The second tab container id is same as the first tab container id.

getting the id of a bootstrap tabs with javascript

I am working on a project and using bootstrap tabs property. http://getbootstrap.com/javascript/#tabs
I got this from the bootstrap.com website:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"> AAAAAA</div>
<div role="tabpanel" class="tab-pane" id="profile">BBBBBB</div>
<div role="tabpanel" class="tab-pane" id="messages">CCCCC</div>
<div role="tabpanel" class="tab-pane" id="settings">DDDD</div>
</div>
</div>
I want to get the id of the tab that is displaying and assing it to
val id
I think i need to use javascript or jquery but i dont have any experience with any of them.
$(".tab-pane").each(function(){
var id = $(this).attr("id");
// work with id
// to modify it
$(this).attr("id",newval)
})
To get the active tab, using JQuery:
var activeTab = $(".tab-content").find(".active");
var id = activeTab.attr('id');
If you want to get the id of your first div you use
var id = document.getElementById("home");
or you can use
var id = document.querySelector("#home");

Simple Tab switching using custom javascript function

I want to custom function too for switch between tabs when clicked on Next button,
I did something like this,this code add the active class into "li" but not show the data under that tab.
How I can do this?
function goNextTab(currtab,nexttab)
{
var curr = $('li.active');
curr.removeClass('active');
curr.next().addClass('active');
$('#'+currtab).attr('aria-expanded', 'false');
$('#'+nexttab).attr('aria-expanded', 'true');
}
<ul id="myTab" role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">Customer
</li>
<li role="presentation">
<a data-toggle="tab" role="tab" aria-controls="job" href="#job" aria-expanded="true">Job</a>
</li>
<li role="presentation">Schedule
</li>
</ul>
<!-- Tab panes-->
<div class="tab-content">
<div id="customer" role="tabpanel" class="tab-pane active">
<button onclick="goNextTab('customer','job')" type="button"> Next</button>
</div>
<div id="job" role="tabpanel" class="tab-pane">
<button onclick="goNextTab('job','schedule')" type="schedule"> Next
</div>
<div id="schedule" role="tabpanel" class="tab-pane">
</div>
</div>
This is how I did it:
curr.removeClass('active');
if (curr.is("li:last")) {
$("li:first-child").addClass('active');
} else {
curr.next().addClass('active');
}
Have a look at the JSFiddle here
1.Remove onclick functions onclick="goNextTab('customer','job')"
2.Bootstrap will automatically takes from href
3. href id and div id should be same
Hope i works..
I suggest to use this:
$("#tabYouSwitchTo").tab('show');
Here is an example:
http://bl.ocks.org/kiranml1/6956013

Opening a new asp.net page on click of jquery tab

I am working on an asp.net page. I have added a jquery plugin for tabs. this is html5 based and have html like this:
<ul class="nav nav-tabs" id="myTab">
<li class="active">All (902)</li>
<li id="tabToday">Today (111)</li>
<li>Since last visite (432)</li>
<li>Vacancies (92)</li>
<li>Trainings (543)</li>
<li>Tenders (233)</li>
<li>Scholarships (1)</li>
<li>Other (4)</li>
<li class="pull-right tab-tbilisi"><a class="tab-tbilisi-a" href="#tbilisi">RUSTAVI</a></li>
<li class="pull-right tab-kataisi"><a class="tab-kataisi-a" href="#kataisi">BATUMI</a></li>
<li class="pull-right tab-batumi"><a class="tab-batumi-a" href="#batumi">KATAISI</a></li>
<li class="pull-right tab-rustavi"><a class="tab-rustavi-a" href="#rustavi">TBILISI</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="all">
<div class="jobs-table">
jobs listing
</div>
</div>
<div class="tab-pane" id="since">
Since</div>
<div class="tab-pane" id="vacancies">
Vacancies</div>
<div class="tab-pane" id="trainings">
Trainings</div>
<div class="tab-pane" id="tenders">
Tenders</div>
<div class="tab-pane" id="scholarships">
Scholarships</div>
<div class="tab-pane" id="other">
Other</div>
<div class="tab-pane" id="tbilisi">
Tbilisi</div>
<div class="tab-pane" id="kataisi">
Kataisi</div>
<div class="tab-pane" id="batumi">
Batumi</div>
<div class="tab-pane" id="rustavi">
Rustavi</div>
</div>
</div>
this plugin loads div when header is clicked. I want to change it so that when user clicks header, then a new asp.net page loads in the tab contents. I dont want to use Iframe. I can use something like below and it works:
$("#tabToday").click(function () {
$('#today').load('controls/TodaysVacancies.ascx', function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
}
);
});
But I want then when a tab changes then URL also changes.
You can simply set the href attribute to your <a> tag and load it via ajax
<ul class="css-tabs" id='myTab'>
<li>Tab 1</li>
<li>Second tab</li>
<li>An ultra long third tab</li>
</ul>
<!-- single pane. it is always visible -->
<div class="css-panes">
<div style="display:block"></div>
</div>
jQuery
$("#myTab").tabs("div.css-panes > div", {effect: 'ajax'});
check this

How to return content to two separate tabbable ID's upon one tab click using Twitter Bootstrap's Tabbable Tabs in a Rails 3.2 App

Using Twitter Bootstrap's bootstrap-tab.js, I have:
<ul class="tabnavcenter" id="myTab">
<li class="active">about</li>
<li>education</li>
<li>experience</li>
<li>verified skills</li>
<li> video</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
How can I get it so if I put:
<div class="tab-content">
<div class="tab-pane active" id="home">Content 2</div>
</div>
... two places in the profile (once above and once below a navbar) and with different content in each, it would work? As of now, the content appears, but once its clicked, it disappears. Can there be two "active" li's at the same time?
Edit:
Since I'm using this in a Rails 3.2 App, I currently have the following in bootstrap-tab.js:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a[href="#home"]').tab('show');
$('#myTab a[href="#tab2"]').tab('show');
$('#myTab a[href="#tab3"]').tab('show');
$('#myTab a[href="#tab4"]').tab('show');
$('#myTab a[href="#tab5"]').tab('show');
$('#myTab a[href="#home2"]').tab('show');
$('#myTab a[href="#tab22"]').tab('show');
and after putting the following in user_body.html.erb:
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
... I get the second content in the div after refreshing the page, no change when I click on the second tab, and then a change back to the name of the first 'a' when I click back on the first one.
It's a mess.
Here is one solution without extra javascript, and compatible with the plugin API.
The principle is to use 2 .tab-content and take advantage of the data-target selector attribute.
HTML
The first .tab-content contains your normal .tab-pane
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab">profile</div>
<div class="tab-pane messages-tab">messages</div>
<div class="tab-pane settings-tab">settings</div>
</div>
and the second .tab-content contains the extra .tab-panes that are optionnal - plus an empty one (#notab_else here)
<div class="tab-content">
<div class="tab-pane active" id="home_else">home_else</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>
Then you have your tabs with one extra attribute, data-target :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li class="">Class Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
This attribute data-target defines the .tab-pane(s) associated with it. The magic is that you can use #ids or .classes or any valid jQuery selector.
JavaScript
All you need to activate everything is the default code :
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
And you can also use your own actions to trigger the tabs as defined by the API.
You do not need that if you keep the default behavior for tabs.
$('#myTab a:first').tab('show');
EXTRA
You can be free of any javascript if you set data-toggle="tab" to the a elements
There is a fade effect available if you add the fade class to the .tab-pane (and fade in for the .active one)
DEMOS
Here is the demo (jsfiddle) and the demo with extra (jsfiddle)
you can only access one id at a time, this is why it is called an id.
Get the content from the first one and apply it to the second one.
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$(this.href +'2').html($(this.href).html()
})
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2">Content 2</div>
</div>
Here is a working solution for your problem (updated):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
<div class="tab-pane active" id="home2">Home Content 2</div>
<div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tab-content2 div").each(function(i, e){
if(!$(e).hasClass('active')) $(e).hide();
});
$('#myTab>li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
$("#tab-content2 div").each(function(i, e) {
$(e).hide();
});
$(this.getAttribute('href') + "2").show();
});
});
</script>
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$('#extendedView').html($(this).html());
});
});
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="extendedView">Content 2</div>
OR
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2"></div>
<div class="tab-pane" id="profile2"></div>
<div class="tab-pane" id="messages2"></div>
<div class="tab-pane" id="settings2"></div>
</div>

Categories