How can i open Order tab using java-script function and also assign active class to the opened tab.
I have tried the below code but it didn't work.
<script>
function showmodal() {
$('#Order').modal('toggle').addClass('active');
}
</script>
-
<ul class="nav nav-tabs" id="myTab">
<li class="active">Active Customer</li>
<li>
<asp:LinkButton OnClientClick="showmodal()" ID="LinkButton1" runat="server">Order</asp:LinkButton></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
home
</div>
<div class="tab-pane" id="Order">
<div class="row">
<div class="col-md-12">
Order
</div>
</div>
</div>
</div>
</div>
You usually open a tab by calling ...tab("show") on the tab's a element but since you don't seem to have an a element for the Order tab, you'll have to add the active class to this tab yourself and remove it from the others.
Eg:
$("#Order").closest(".tab-content").find(".tab-pane").removeClass("active");
$("#Order").addClass("active");
You should take a look at the documentation to see how to properly use tabs.
Related
I have this plunkr,
http://plnkr.co/edit/AEYQpvmjUR6DUq2jtYid?p=preview
Part of My html code:
<body ng-app="App" ng-controller="mainController">
<form name="myForm1" style="align-content:center;">
<div id="divTabs" >
<h4>CMA Analysis/Assessment</h4>
<ul class="nav nav-tabs" id="tabs" style="border-bottom: none;">
<li class="active">
<a data-toggle="tab" href="#AwarenessMenu">Awareness</a>
</li>
<li>
<a data-toggle="tab" href="#UnderstandingMenu">Understanding</a>
</li>
<li>
<a data-toggle="tab" href="#AcceptanceMenu">Acceptance</a>
</li>
<li>
<a data-toggle="tab" href="#CommitmentMenu">Commitment</a>
</li>
<li>
<a data-toggle="tab" href="#AdvocacyMenu">Advocacy</a>
</li>
<li class="next-tab">
Next >
</li>
</ul>
</div>
<div id="divAlltabContent" class="tab-content" >
<div id="AwarenessMenu" class="tab-pane fade in active">
AwarenessMenu
</div>
<div id="UnderstandingMenu" class="tab-pane fade in active">
UnderstandingMenu
</div>
<div id="AcceptanceMenu" class="tab-pane fade in active">
AcceptanceMenu
</div>
<div id="CommitmentMenu" class="tab-pane fade in active">
CommitmentMenu
</div>
<div id="AdvocacyMenu" class="tab-pane fade in active">
AdvocacyMenu
</div>
</div>
</form>
</body>
Problem is that in my application I am able to click next button to navigate the tabs but when I click on the "tab" e.g Understanding, screen goes blank.
How it runs on my application:
I can click on CMA tab. On click, the Awareness, understanding, acceptance ... tabs are shown. By default only Awareness's contents are shown (but not in plunkr, not sure why, it is showing everything).
On click on next I can navigate the tabs without any page refresh (cannot navigate in plunkr :/)
Real question:
I need to be able to click on any tab to show the content of the clicked tab. Next button should also work.
Would appreciate a lot for help on this.
I added the full js in plunkr instead of references because it wasn't working properly.
You need to change
href="#AwarenessMenu"
to
data-target="#AwarenessMenu"
You have to understand the route,when,ng-view for doing this.
So what I am trying to do is a form which is due to its length displayed over multiple pages. To realise this I am using different div's beeing displayed seperatly on one html page.
I am using angularJS and Bootstrap with this little piece of code:
It doesn't matter how I load this code. It's not working as first thing in a index.html file nor being loaded as a template with angularJS.
<div ng-controller="uploadCtrl">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#part1">Start</a></li>
<li><a data-toggle="tab" data-target="#part2">Step 2</a></li>
<li><a data-toggle="tab" data-target="#part3">Finish</a></li>
</ul>
<div class="tab-content">
<div id="part1" class="tab-pane fade in active">
<h3>Form part 1</h3>
<p>Some content.</p>
</div>
<div id="part2" class="tab-pane fade">
<h3>Form part 2</h3>
<p>Some content in menu 1.</p>
</div>
<div id="part3" class="tab-pane fade">
<h3>Form part 3</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
My problem is I can only click once on the links in the nav. There seems to be a problem with the toggle-function of class="active". Clicking on a link adds the active-class but it is never removed.
After clicking on every link they all look like this: <li><a data-toggle="tab" data-target="#part1" class="active" aria-expanded="true">Form part 1</a></li>
Plus none of my <li> are of class="active" after the first link-selection.
I am only using
jquery.min.js
bootstrap.min.js
bootstrap.min.css
npm.min.js
angular.min.js
I strongly recommend you to use angular-ui bootstrap for this. It has a special case for nested forms. Using bootstrap.js over angular that already provides DOM manipulations is a bit redundant and can cause unexpected behaviour.
<form name="outerForm" class="tab-form-demo">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Form Tab">
<ng-form name="nestedForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required ng-model="model.name"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Tab One">
Some Tab Content
</uib-tab>
<uib-tab index="2" heading="Tab Two">
More Tab Content
</uib-tab>
</uib-tabset>
</form>
More info here
There seems to be something wrong with my libraries.
I switched to Bootstrap Version 3.3.6 and it worked perfectly. Earlier I used the current Version 4.0.0 from Bootstraps Homepage given through the standard download option.
I got this code from the Bootswatch website, it supposed to work just fine :
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<li class="">Other</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Tab home!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Tab Profile!</p>
</div>
<div class="tab-pane fade" id="other">
<p>Tab Other!</p>
</div>
</div>
But I'm using AngularJS routes, so the href links aren't working, I tried to replace href with data-target, but it doesn't work either. Please help, and is there a simple way to change the Tab class to active while active? Thank you.
You'll want to look into using Angular-UI for Bootstrap components like this. It gives you Bootstrap components like tabs that have been written specifically for AngularJS applications. Check out the "Tabs" section on that link.
I'm using the JavaScript Bootstrap 3 tabs as documented, like this:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
But with Angular, it's changing the URL to /#/profile for instance..
How can I prevent this?
Just put data-target instead of href attribute and it will work without changing urls.
At one point, if a link had the _target attribute set, angular wouldn't intercept those clicks. Perhaps that will work in this case?
I am having trouble opening back up a specific tab after submitting a form. I am using Twitter Bootstrap 2.1.0. Basically, when the from is submitted, it will go back to the first tab instead of the tab where the form was submitted. Here is my code:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Tab 1</li>
<li>Form Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade in" id="tab1">
Content goes in here
</div>
<div class="tab-pane fade in" id="formtab">
<form action="http://myurl.com#formtab" class="center active" method="post">
form stuff goes in here
</form>
</div>
<div>
I figured that adding the #id at the end of the link would make the browser open up that specific tab but it goes back to the tab1 tab. Any help would be appreciated. Thanks