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#.
Related
I am creating a project Where I have a homepage with a sidebar. On click of the sidebar, the component is supposed to be loaded on the right hand side of the page. I have done the routing for the same too. Can anyone help me?
<div class="container">
<div class="row">
<app-mentor-sidebar></app-mentor-sidebar>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><a href="#" >
<em class="fa fa-home"></em>
</a></li>
<li class="active"><a [routerLink]="">Dashboard</a></li>
<li class="active"><a [routerLink]=""> {{breadcum}}
</a></li>
</ol>
</div>
<br>
<div class="row">
<div class="btn-group">
<button class="btn btn-primary" (click)=goback(); >Back</button>
</div>
<router-outlet> </router-outlet>
</div>
</div>
</div>
The is supposed to load the html component but nothing is happening.
On initial load, the content from both tabs show on the webpage, once the tab is clicked for the first time they begin to work as expected.
Any ideas on why this is happening?
Here is my html
<div id="userFunctions" style="display: none;" >
<h2 id="welcome"></h2>
<button id="btnChangeUser" class="btn btn-primary" style="display: none;">Change User</button>
<br>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a id="showSubs" data-toggle="tab" href="#subscriptionManagement">Subscription Portal</a></li>
<li><a id="showLocation" data-toggle="tab" href="#locationManagement">Location Management</a></li>
</ul>
<div class = tab-content>
<div id="subscriptionManagement" class="tab-pane fade in active">
<hr>
<section id="sendSubRequest">
<h4>Request Subscription</h4>
<div class="input-group">
<input type="text" id="subUserName" class="form-control "></input>
<span class="input-group-btn">
<button id="btnSubUser" class="btn btn-primary">Subscribe</button>
</span>
</div>
</section>
<br>
<section id="ReviewSubRequests">
<h4>Incoming Request(s)</h4>
<ul id='subscriptionsList'>
</ul>
</section>
</div>
<div id="locationManagement" class="tab-pane fade in active">
<hr>
<section id="cityDetails">
<section id="map">
</section>
<br>
<section>
<button id="btncheckInLocation" class="btn btn-primary">Check-In User location</button>
</section>
</section>
<section id="friendsList">
<h4>Subscribed Friends</h4>
<ul id='subscribedUsers'>
</ul>
</section>
</div>
</div>
</div>
Both your tabs (#subscriptionManagement and #locationManagement) have the active class, meaning they are both active by default. This class should be getting added on navigation, indicating that the content should be shown. You simply need to remove this class from the tab which you don't want to show on initial load:
Change:
<div id="locationManagement" class="tab-pane fade in active">
To:
<div id="locationManagement" class="tab-pane fade in">
Hope this helps! :)
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 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
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();