I have the following HTML:
<div id="channels">
<ul class="nav nav-tabs" id="ul-channels">
<li class="channel" data-roomid="lobby"><a class="link-channel" href="#lobby" data-toggle="tab">lobby</a></li>
<li class="channel active selected" data-roomid="test"><a class="link-channel" href="#test" data-toggle="tab">test</a></li>
</ul>
</div>
I need an event that occurs when switching tabs. Like this:
$('.nav-tabs a').click(function (e) {
alert("Q");
});
I tried a lot of options, but I had no success. I will appreciate any help.
The final my solution:
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
console.log(e.target) // activated tab
})
Related
I have got an ajax page load working on my wordpress site with both the official twenty sixteen and storefront themes.
The only hitch is that the mobile nav menu does not close once a link has been clicked and the new page has been fetched and loaded by the ajax script.
I've looked through most of the other similar topics and tried various snippets of jquery but have not been able to get it working.
The code for the menu toggle button on twentysixteen is :
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
The menu container html is :
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293">Labels
</li></ul>
</div>
From my research into the matter it would seem that there is potentially two ways to achieve what I'm after.
Changing the aria attribute on click from expanded="true" to expanded="false" could do the trick?
I found this code snippet but have no idea how I would actually implement
$(function () {
$('li').on('click', function (e) {
var menuItem = $( e.currentTarget );
if (menuItem.attr( 'aria-expanded') === 'true') {
$(this).attr( 'aria-expanded', 'false');
} else {
$(this).attr( 'aria-expanded', 'true');
}
});
});
Use a jquery click function to trigger the toggle button.
$( "#menu-main" ).click(function() {
$( "#menu-toggle" ).click();
});
Any help would be greatly appreciated! Thank you!
try this
$(function () {
$('#menu-main li>a').on('click', function (e) {
$( "#menu-toggle" ).click();
});
});
or
$(function () {
$('#menu-main li>a').on('click', function (e) {
// i set $(".toggled-on") because i dunno which is your main menu
//<div class="menu-main-container">
// or
//<ul id="menu-main" class="primary-menu">
$(".toggled-on").attr("aria-expanded","false");
$(".toggled-on").removeClass(".toggled-on");
});
});
Hope this is solves your problem,thanks
$("#menu-toggle").click(function(e){ /*for click on menu*/
$('.menu-main-container').toggle()
})
$('.menu-item').click(function(e){ /*for click on link*/
$("#menu-toggle").trigger('click')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293">Labels
</li></ul>
</div>
Information and Question:
If you run the JSFiddle you'll notice that the dropdown pops open like it's supposed to when the document loads but when you click the button it doesn't. It's the same exact code but I can't for the life of me figure out why it doesn't have the same results.
JSFiddle: http://jsfiddle.net/pLsuxkaa/
HTML:
<input type="button" onclick="testfun();" value="Test"/>
<p></p>
<br/>
<br/>
<div class="dropdown testmenu">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</div>
Scripts:
$(function ()
{
$('p').html('started');
$('.testmenu .dropdown-menu').dropdown('toggle');
});
function testfun()
{
$('p').html('test button pushed');
$('.testmenu .dropdown-menu').dropdown('toggle');
}
When u write
$('.testmenu .dropdown-menu').dropdown('toggle');
You declare a new dropdown, after this you just have to toggle like this :
$('.testmenu .dropdown-menu').toggle();
Complete code :
$(function ()
{
$('p').html('started');
$('.testmenu .dropdown-menu').dropdown('toggle');
});
function testfun()
{
$('p').html('test button pushed');
$('.testmenu .dropdown-menu').toggle();
}
You would have to call testfun() from inside the $(function () (document ready) function, as using bootstrap functions requires the page to be finished loading
You can just bind an event to the input button, and have the callback function open the dropdown menu. Here's an example:
$('input').on('click', function (e) {
e.stopPropagation();
$('p').html('test button pushed');
$('.testmenu .dropdown-menu').dropdown('toggle');
});
And here's a working jsfiddle.
I'm having trouble understanding the ng-show angular directive, it is not working correctly for me. I can't get the boolean value to change in the controller like some examples I've seen online. Rather than use the tabs javascript I decided to try and implement a simple angular show and hide for the tabs. However I have checked many examples on the web and I can't find out what is going wrong. Nothing is showing up at all from the divs.
<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active">Titles</li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
and my JS side
MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
$('#contacts a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=true;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#writers a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=true;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#files a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=true;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#companies a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=true;
})
$('#titles a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
})
}]);
Simply Trying to flip the show value on each div whenever a tab is selected. I have a feeling it might have to do with mixing jquery and angular but Im not sure.
Thanks
James
You are trying to mix JQuery and AngularJS where you would probably be fine with just AngularJS, this should definitely work.
HTML
<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>
..
Javascript
$scope.ShowContacts = function()
{
$scope.contactsdiv = true;
.....
Just fill in with the rest of your code.
ng-click is an easier way then defining JQuery on click events. It will execute whatever Javascript you put inside of it and is overall cleaner.
You can also move the ng-click to the li tag which would eliminate your need for the a tag to begin with.
Edit:
Like the previous answer said, you need to extend the controller div to include what your changing. I missed that, what you have with JQuery should work then, but ng-click will be much cleaner regardless.
Based on where you defined your controller, the ng-show directive is not in the same scope as the links you've defined. You need to change your where the definition of the controller is like so:
<div class="container" ng-controller="ExtractionTabsCtrl">
<div class="row">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active"><a href ng-click="test()">Titles</a></li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
</div>
You'll notice I added a wrapper around your row and subsequent divs. The wrapping div is now the total scope of your controller, instead of just the ul.
I was experimenting with programatically changing tabs using jQuery. I tried to implement the solution given by #MasterAM here. However, the Chrome console shows the error Uncaught TypeError: undefined is not a function
Here is my HTML:
<div id="click-me-div">Click Me</div>
<ul class="nav nav-tabs">
<li class="active">I like Fruits</li>
<li>I like Veggies Too</li>
<li>But Samosa's Rock</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div>
<div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div>
<div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div>
</div>
And here is the jQuery:
$(document).ready(function() {
$("#click-me-div").click(function() {
alert('yes, the click actually happened');
('.nav-tabs a[href="#samosas"]').tab('show');
});
});
The desired outcome is that, if I click "Click Me", the active tab should change to the "samosas" tab.
What am I doing wrong?
You left out the jQuery function
$(document).ready(function() {
$("#click-me-div").click(function() {
alert('yes, the click actually happened');
$('.nav-tabs a[href="#samosas"]').tab('show');
});
});
Fiddle
Try this code
You can use onclick() function and path id name of tab.
<a onclick='ActivTab("Security")' class="nav-link" data-toggle="tab" href="#Security" aria-controls="profile" role="tab" id='Security'>Security</a>
<script>
$(document).ready(function(){
ActivTab('Security');
});
function ActivTab(id){
// $('.nav-tabs a[href="#' + id + '"]').tab('show');
$('.nav-tabs a[href="#' + id + '"]').trigger('click');
};
</script>
Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}
You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});