How to have one form one several Twitter Bootstrap tabs?
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
<form id="personal-data" class="form-horizontal">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
What's wrong of having one <form> that wraps everything up?
<form id="personal-data" class="form-horizontal" method="POST" action="#">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</form>
are you submitting tab by tab or once on the last tab?
if one-by-one (for exemple, validation), simply use $.post to send data back and forward on-the-fly (in other words, make ajax calls).
I just bumped into the same problem, if you want to submit once in the last tab, I assume there's a button somewhere to move beetwen tabs. By default clicking those buttons will trigger the POST request. To prevent this add following line to your button click funciton:
event.preventDefault();
Related
I am using tab through jquery now I want to add nested tab in tabs. MY problem is when I click on nested tab it will hide main tab and no content will show onclick on nested tab
Here is my code:-
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="tabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
Kindly advise me any solution.
Without seeing the jQuery part of the code nor the CSS we can only guess, anyway probably the problem is that you have to assign a different classname to the ul block in the nested tab. Like this:
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="subtabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
I'm trying to implement a html tabbed interface. For some reason clicking on a tab will kick me back to the homepage instead of showing a new list of data. Do I need to add a url route to the <a href> ?
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
If you mean you are just trying to show the contents of the tab then I would change your href="#something" to href="javascript: return false;" or put the code in your event handler.
Tested this over on Bootply
http://www.bootply.com/DqUJfu6r4z
You simply need to close the quotations on your IDs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Pick Colors
</li>
<li>Add Text
</li>
<li>Add Logos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="well">
<ul class="nav">
<li class="color-preview" title="White" style="background-color:#ffffff;"></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="well">
<div class="input-append">
<input class="span2" id="text-string" type="text" placeholder="add text here...">
<button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
</button>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div id="avatarlist">
<img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
</div>
</div>
</div>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
I just fixed it. The issue was that
<li>Add Text
</li>
<li>Add Logos
Should've said data-toggle="tab" instead of tab#.
I have problem with bootstrap nav-tabs. I have this code. When I click on company button it shows me text in company and text in pressroom. When I click on press room button it shows me text only in press room and when I click on contacts button it shows me text in press room and contacts.
Any idea how solve this problem?
Thanks
<div class="about_us_links">
<ul class="nav nav-tabs">
<li class="active">Company</li>
<li>Press Room</li>
<li>Contacts</li>
</ul>
</div>
<div class="tab-content">
<div id="company" class="tab-pane fade in active">aaa</div>
<div id="pressroom" class="tabe-pane">bbb</div>
<div id="contacts" class="tab-pane">ccc</div>
</div>
You have wrong class in pressroom div. it should be tab-pane instead of tabe-pane
<div id="pressroom" class="tab-pane">bbb</div>
Js Fiddle Demo
I have the tabs code working but on page load all the tabs are displayed... Once I click the second tab only that second tab's content is displayed. I click back to the first tab and only the first tab's content is displayed. Refresh the page and you see all the content on this first tab until you repeat the above steps. Any ideas what I am missing?
<ul id="tab" class="nav nav-tabs">
<li class="active">
firstab
</li>
<li class="">
secondtab
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="firsttab">
<p> Content of first tab </p>
</div>
<div class="tab-pane fade active in" id="secondtab">
<p> Content of second tab </p>
</div>
</div>
Both tabs can't have the class "active"