here is my issue:
(Please bear with me if that is easy/stupid question, I am new to Angular :) )
I am loading a page with angular where I have 3 tabs (and so 3 contents) which are using the tabs.
So when I land on my page, all the three tabs and content are generated.
My problem is that when I click on a different tab, the link matches the route, and I guess go back to the controller and render the view again.
My thoughts about this issue is to disable the view when I go to my controller the second time, but can't find any way of doing that.
As said, I am kind of new on angular, so if you think I should do things differently, any comments are welcome :)
Here is my view:
<div class="bs-example bs-example-tabs">
<ul role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">
<a role="tab" data-toggle="tab" href="#tab1">tab1</a>
</li>
<li class="" role="presentation">
<a role="tab" data-toggle="tab" href="#tab2">tab2</a>
</li>
<li class="" role="presentation">
<a role="tab" data-toggle="tab" href="#tab3">tab3</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in" role="tabpanel">
<div ng-include src="'/path/includes/tab1.htm'"></div>
</div>
<div id="tab2" class="tab-pane fade" role="tabpanel">
<div ng-include src="'/path/includes/tab2.htm'"></div>
</div>
<div id="tab3" class="tab-pane fade" role="tabpanel">
<div ng-include src="'/path/includes/tab3.htm'"></div>
</div>
</div>
And here is where I catch the route in the controller:
.when('/url/:intUserId?', {
controller:'ViewApiCtrl',
templateUrl: '/path/view-api.htm',
})
Let me know if I should post more info about my code !
Thanks a lot
EDIT
Basically I don't want to only return the content of one tab only, or just display one tab at a time.
For this example here, my 3 tabs are one big form, with some inputs on the 3 different tabs.
So it doesnt matter on what tab the user is, he can change a field on one, switch tab, click on save on the second tab and it will save the whole form.
What I am looking for is something like, when I switch tab, let bootstrap handle the display, and I want Angular to not doo anything ( so if it goes to the controller, exit it straight away and dont render/reload the template).
Thanks Michel for the tips, I think it will be useful on my other pages with tabs that are not really linked to each other (I can load one without the others), but for this particular case, I don't think it will suit me :(
On php using Zend Framework, I used to do it that way if that helps:
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender( true);
Okay, so with your latest edit, with bootstrap you can do that, and with angular-ui as well!
Just put your tabs inside the form and when you submit all the data is submitted as well!
Related
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
I am currently helping to solve a toggle problem but there's no error showing in console and I don't know where to start looking.
There are two tabs which can be toggled between each other. Let's say toggle tabs are pay / method. Default page is showing pay and when method tab is clicked, method tab shows perfectly but when clicking pay again the tab (CSS) worked fine that we can see pay tab is active but contents of pay doesn't show. The contents are still method.
Currently using bootstrap and of course the script included jquery already.
The html code is
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="home" href="#home" aria-expanded="true">Pay</a>
<li class="" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="method" href="#method" aria-expanded="false">method</a>
</ul>
I am not sure what else to show since the scripts is form bootstrap, it'll be HUGE.
P.S. as said, even though the contents don't show but by clicking each other, I can still see the class is set to active and aria-expanded is set to true to whichever tab I clicked. (Also, I am wondering if I couldn't find out what is really causing this since there are no errors and so on, am I able to write a new script and include the script below the bootstrap script? That should override and work right?)
Edit:
I have tried adding jquery and so I can select the current element but somehow it only worked a bit.
I added another class into the html
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active payment-tabs">pay</li>
<li role="presentation" class="payment-tabs">method</li>
</ul>
I have script like this
$("ul.nav.nav-tabs").on('click', $(".payment-tabs.active"), function () {
console.log($(".payment-tabs.active"));
});
I tried console.log lots ways to find the current element or at least the a element but when I console.log I realized when I click method, the console.log does give the element of method but when I click pay the first time what I got from console.log is still the method element even though pay already has active class added. If I click the pay again then I will finally get the pay element. I might have an idea of the reason but I just have no idea how I can solve this.
Can someone please give me a hand please?
Thanks in advance.
Make sure you include the scripts needed to run the code. See the running demo here
Basically, you just need to call 3 main sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The Tab
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#payment" data-toggle="tab">Payment</a></li>
<li><a data-target="#method" data-toggle="tab">Method</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="payment">This is a payment area</div>
<div class="tab-pane" id="method">This is a method.</div>
</div>
</div>
I have a twitter bootstrap tabs component where i have five tabs.I want 3 of the tabs to be part of a form and the 4th, 5th not be.
So I thought, I'll just wrap the 3 tabs in a form.But it does not work. I have already checked How to wrap a selection of twitter bootstrap tabs as one form? this thread and from the first answer got two issues. Since in the 2nd answer issues are explained but i am expecting better solution using js and without modifying bootstrap core file.
I am using twitter bootstrap 3.3.2. How can I fix this?
Here is the sample code:
<div class="row">
<div class="col-lg-12 animated-panel zoomIn" style="animation-delay: 0.4s;">
<div class="hpanel">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">First</li>
<li class="">Second</li>
<li class="">Third</li>
<li class="">Fourth</li>
<li class="">Fifth</li>
</ul>
<div class="tab-content">
<form>
<div class="tab-pane active" id="tab-1">
<div class="panel-body">First tab fields
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">Second tab fiels
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">Third tab fields
</div>
</div>
</form>
<div class="tab-pane" id="tab-4">
<div class="panel-body">Fourth tab content
</div>
</div>
<div class="tab-pane" id="tab-5">
<div class="panel-body">Fifth tab content
</div>
</div>
</div>
</div>
</div>
</div>
I guess since bootstraps javascript conflicts with this kind of form placing you need to build an (dirty) workaround if you really want to use bootstraps tabs with this kind of form-placing.
You could place inside each of the first three tabs an single form and copy (only for submitting) the content of the other forms into the form submitted.
#lonesomeday mentions a way to intercept submitting forms
So you could do something like
$(document).on('submit', '.tab-pane:lt(3) form', function(e){
e.preventDefault();
$('.tab-pane:lt(3) form').not($(this)).children().clone().addClass('toRemove').hide().appendTo($(this));
this.submit();
$('.toRemove').remove();
});
Note: I did not test the code above
If your submit-button/trigger is outside of the tab-structure you could just copy the contents of the three tabs into an hidden form anywhere on the page and submit this one.
Another way would be to invoke jQuery's ajax without using forms.
Is there a way to do the following
<!-- 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 class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route
I have a JSP page which uses bootstraps data-toggle="tab" functionality. Upon page load I make one tab active.
<ul class="nav st-nav-tabs">
<li class="active">First Tab</li>
<li>Second Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"></div>
<div class="tab-pane active" id="tab2"></div>
</div>
I have a Highcharts chart on the page, whenever a user clicks on one of the columns I call a JS function which makes tab2 the active tab on the page. Inside this function I've tried a few different commands but none seem to work. I'm quite new to jQuery so I'm hoping someone might be able to point out where I'm going wrong with my syntax.
function handleClick(){
//I've tried the following, none seem to work
$('#tab2').toggleClass('active');
$('#tab2').show();
$('#tab2').tab('show');
}
First you need to give your tabs an id, i will call it myTabs:
<ul class="nav st-nav-tabs" id="myTabs">
Then you can call and show your tabs by name to show them:
$('#myTabs a[href="#name"]').tab('show');
You can read about tabs in bootstrap's documentation.