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>
Related
my first question here.
I have a program runing on Angular 11 with Bootstrap 4.1.3. I'm trying to make a button that returns to the previous nav-tab the user was seeing, or just a button that directly goes to the previous/next tab would be ok too.
The code i'm using creates a button that does nothing on click. At this point i've tried everything i could find around the internet but nothing seem to work properly.
And also, i a beginner using Angular/Bootstrap.
So, what i'm doind wrong? Someone can help me?
<ul class="nav nav-tabs pl-1">
<li class="nav-item active">TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
<a class="btn btn-primary btnPrevious">Back</a>
$('.btnPrevious').click(function() {
const prevTabLinkEl = $('.nav-tabs .active').closest('li').prev('li').find('a')[0];
const prevTab = new bootstrap.Tab(prevTabLinkEl);
prevTab.show();
});
I need help with one thing. I created a page where clicking on one button will scroll the page to the section with the side panel of buttons / bookmarks. I did it with a JS script, I would like the next action to be performed after clicking on the same button. I've already tried to do it using click() method, I've also tried to add "active" class to one of the tabs of the panel - unfortunately everything without positive result. Finally, maybe one of you will be able to help me.
Ultimately, I want the first link to switch the active section tab below. For better illustration I'm sending a picture of the pages.
JS file (The commented lines are the code I tried to use before):
function scrollWin() {
window.scrollBy({ top: 500, left: 0, behavior: 'smooth' });
//const prescription = document.querySelector("#tab-title-prescription_tab");
//prescription.classList.add("active");
//document.getElementById("tab-title-prescription_tab").click();
}
HTML code:
<ul class="tabs wc-tabs" role="tablist">
<li class="description_tab" id="tab-title-description" role="tab" aria-controls="tab-description"> Opis </li>
<li class="additional_information_tab" id="tab-title-additional_information" role="tab" aria-controls="tab-additional_information"> Dodatkowe informacje </li>
<li class="reviews_tab" id="tab-title-reviews" role="tab" aria-controls="tab-reviews"> Opinie (0) </li>
<li class="prescription_tab_tab active" id="tab-title-prescription_tab" role="tab" aria-controls="tab-prescription_tab"> Recepta </li>
<li class="survey_tab_tab" id="tab-title-survey_tab" role="tab" aria-controls="tab-survey_tab"> Badania </li>
</ul>
Image:
https://imgur.com/fqu4GyG
First button:
<a onclick="scrollWin()" href="#tab-prescription_tab" class="button additional-button">Wybór szkieł</a>'
Anchor doesn't work ? Maybe you will make your button as link and set href="#tab-prescription_tab"
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!
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.
I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!
There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section