I'm using a twitter-bootstrap nav bar combined with tabs to load in forms via ajax (I'm using Django to serve the forms)
<ul class="nav nav-pills" id="tabs">
<li>Form1</li>
<li>Form2</li>
<li>Form3</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
<div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
<div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>
This couples with the jquery:
$('#tabs').bind('show', function(element) {
paneID = $(element.target).attr('href');
src = $(paneID).attr('data-src');
$(paneID).load(src);
});
Firstly, part of me wonders whether this might be a bad idea. I can't think of a reason why but if someone could point out to me whether this method has any drawbacks I would appreciate it.
Secondly, When I navigate away from a tab, I'd like to trigger the "onunload" event for that tabs content. But I can't seem to find a way to "unload" the data from a tab when it is navigated away from.
$('#tabs').bind('hide', function(element) {
doStuff();
});
is not valid apparently. Any help/guidance appreciated.
Bootstrap tab fires an event when the tab is shown.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Taken from bootstrap:
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
You can use the relatedTarget. That is the tab that just "unloaded".
Related
I am new to bootstrap and I am currently playing around with a tab/navigation system. This is what I have for the tabs and the tabs content so far:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Questions
I want to link directly to one of the tabs. E.g. www.mysite.com/mypage#B or www.mysite.com/mypage/#B should directly open tab B.
When clicking on tabs the URL needs to change to corresponding #id to be able to get to the current tab when refreshing the page.
I got 1 to work by JS and to check for what is after # in the URL and then via php have an if statement on each nav to see if it should be active or not, and same for the tab-panes. However, that doesn't solve problem 2.
How can I solve this nicely? Or should I skip Bootstrap and just create my own navigation with some JS?
A few things first:
You tagged your question with both bootstrap-4 and bootstrap-5, but you're actually using bootstrap-3. My solution below works for Bootstrap 3, but requires changes for Bootstrap 5 that uses the data-bs-target attribute.
The version of jQuery (1.11) you're using is from 2014. I recommend using a more recent version (3.6.3).
To solve problem 1 and 2, add the following jQuery script:
var hash = window.location.hash;
$(".nav-tabs").find("li a").each(function(key, value) {
if (hash === $(value).attr('href')) {
$(value).tab('show');
}
$(value).click(function() {
location.hash = $(this).attr('href');
});
});
This will
Get the hash from the url;
Loop through each nav-tab li a element;
If the hash matches with the href attribute of one of the tabs: show it;
Attaches a click event handler on all tabs, changing the url hash using its href attribute when fired.
For other solutions, take a look at this SO question.
I am developing an web app. In some of the web pages I am using Twitter Bootstrap pane tabs. below is my code.
I am trying to go to a specific tab when the page reloads.
For example: when I am in the www.mywebsite.com/c.html the first active tab is 'bc' when I go to 'cc' and refresh the page it goes back to 'bc'. I want it to stay in 'cc'. I need to be able to do something like this www.mywebsite.com/c.html#cc But this does not work.
I looked at Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload? but could not find an answer that fits my code. I tried changing the class names still no luck.
<div class="wp">
<div class="widget">
<div class="tabs">
<ul class="nav nav-pills nav-justified">
<li class="active">bc</li>
<li>cc</li>
<li>lc</li>
<li>pc</li>
<li>sc</li>
</ul>
</div>
</div>
</div>
<div class="tab-content tab-content-inverse">
<div class="tab-pane active" id="bc">
...
</div>
<div class="tab-pane" id="cc">
...
</div>
<div class="tab-pane" id="lc">
...
</div>
<div class="tab-pane" id="pc">
...
</div>
<div class="tab-pane" id="sc">
...
</div>
</div>
Get the anchor part of the URL by using location.hash in your JavaScript/jQuery.
Then, append it into the following JavaScript:
document.querySelector('.nav li a[href="#lc"]').click();
You'll simply insert the value you pull using location.hash after the href= portion, which will then be clicked.
Change the value in the following Bootply example and run it to see how it works.
BOOTPLY
This worked for me. I changed the class names to tabs and the event to click event
$(document).ready(function () {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
}
$('.tabs a').on('click', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
You can write some code in JavaScript that will run when the page loads and check the # part of the url (window.location.hash). Take a look at the bootstrap website for how to toggle a certain tab: http://getbootstrap.com/javascript/#tabs
I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');
In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();
I’ve created a tabbed interface with jQuery to show/hide content.
I want to be able to link to a particular tab and allow users to bookmark the current tab they are on.
As I use IDs for each containing div I can achieve this by removing return false; from the click event but this causes the page to skip down to the containing div for the tab.
Is there a way of ensuring that the URL contains the # part of the address but prevents the page from skipping? Is there another way of approaching this problem that I haven’t come across yet?
//Get all containers with tab content
var tabContainers = $("div.tab");
//Get value of # from URL
if (window.location.hash) {
//if there's a # display the relevant tab
$(tabContainers).hide().filter(window.location.hash).show();
} else {
//Show the first tab
$(tabContainers).hide().filter(":first").show();
}
$("ul#tabNav a").click( function () {
//Hide all tab content then display the current
$(tabContainers).hide().filter(this.hash).show();
//prevent page from skipping but also prevents # from appearing in address bar
return false;
});
<div id="tabNavContainer">
<ul id="tabNav">
<li id="tab1"> Course essentials </li>
<li id="tab2"> Course details </li>
<li id="tab3"> Next steps </li>
</ul>
</div>
<div class="tab" id="a">
<h3>TAB A</h3>
</div>
<div class="tab" id="b">
<h3>TAB B</h3>
</div>
<div class="tab" id="c">
<h3>TAB C</h3>
</div>
Any help is much appreciated.
You can set window.location.hash as well as reading it:
$("ul#tabNav a").click( function () {
//Hide all tab content then display the current
$(tabContainers).hide().filter(this.hash).show();
window.location.hash = this.hash;
//prevent page from skipping but also prevents # from appearing in address bar
return false;
});
Note that this will add a page into the browser history, allowing the user to use the back and forward buttons to change the hash. You should ideally also look at handling that.