I have two tab that have the same content-structure but the information that I have to load in each one is different. I do not want to duplicate the html code, how can I do it and also how can I indicate to each form which are the value to load in each tab.
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="Tab1">
// some html dropdown, textfield, etc
</div>
</div>
Now the tab1 loaded but tab2 dont work fine. I try somethig like this but I loose all my event in tab2
var clonedDiv = jQuery('#Tab1').clone();
clonedDiv.attr('id', 'Tab2');
jQuery('#tabs').append(clonedDiv);
Related
I am using tab panes defined as
<ul class="nav nav-tabs">
<li>Personal Information</li>
<li class="active">Contact</li>
<li>Parent/Guardian Information</li>
<li>Educational Background</li>
<li>Study Prospects</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="personal"></div>
<div class="active tab-pane" id="contact"></div>
<div class="tab-pane" id="guardian"></div>
</div>
It can be seen that i have selected Contact as First selected Tab, however when I refresh the page< on full page load it automatically changes tab to Personal that is First tab.
Is there any way i can manually switch tabs via javascript etc?
There is a solution to change the tabs, so you will need to:
Keep the last tab some where.
Call the below function when the page refresh.
This how you can call it:
activeTab('tab1');
function activeTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
This is the code you need.
HTML:
<li id="contact">Contact</li>
JavaScript:
window.onload = function() {
document.getElementById('contact').classList.add('active');
};
I have a tab component say in a HTML strcture
<ul>
<li><a id='tab1' href='/url#tab1'> Tab1 </a></li>
<li><a id='tab2' href='/url#tab2'> Tab2 </a></li>
<li><a id='tab3' href='/url#tab3'> Tab3 </a></li>
</ul>
<div class='tab-content'>
content of respective div loaded on click.
</div>
Here the content of the respective TAB as the click handlers are in place for that and its working fine without any
problems. The click handler looks like
$('#tab2').click(function() {
//show tab2 content.
});
Now, I have to support deeplinking so that , when user comes through URL : http://url#tab2, need to show respective tab content. So for this,
my approach is to use 'hashchange' event , which will read hash params and load the content based on the hash value.
The query or the pain is , woundn't it cause a conflict between click event on a and hash change event?
What should be the appropriate way of resolving deepliking in this case ?
Hi i'm having below scenario,
Fetching products from other 3rd party website,
Their product page having 3 different tabs and their default html structure is like this,
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"></div>
<div class="gallery"></div>
</div>
Is i click on second tab (spec tab) then the html structure is (contents adding dynamically),
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"> Specs goes here </div>
<div class="gallery"></div>
</div>
Because of the contents adding dynamically according to tab selection, i cant able to fetch complete contents. Is there any way to click other too and get all contents ?
Did anyone know how to solve this ?
Not sure what are you asking here. but may be worth a try :
var tabs = document.getElementsByTagName("li");
for (var i = 0, x; x = tabs[i++];)
x.click();
Simple question:
How can I keep the selected tab upon page refresh in JQuery Mobile (1.4.2)?
More specifically: I have a results page which is passed through a Django paginator first to split multiple rows of results from my database, however on page selection (?page=1, ?page=2 etc. or even refresh) I lose the user selected tab. How can I fix this?
I am using code very similar to the one found in the docs:
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>My results as an ordered list</h1>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</div>
<div id="two">
<h1>My results as an unordered list</h1>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</div>
</div>
I'm assuming that you can tweak the request url using anchors
As Rob suggested in the comment, you can go for location hashes, to solve your problem:
Set for every tab you want to track a link with a unique hash tag and keep it correlated to the target div id.
one //one
two //two
//corresponds to
<div id="one">...</div>
<div id="two">...</div>
Then read the hashes and take proper actions:
function uri_get() {
return window.location.hash.slice || "#default";
}
$(document).ready(function () {
var $uri;
uri = $(uri_get()); //$uri now contains your tab element.
});
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();