I have used the bootstrap tabs in my webpage
<ul id="myTab" class="nav nav-tabs tab_new_vir" role="tablist">
<li role="presentation" class="active">Tab 1<span> | </span></li>
<li role="presentation">Tab 2<span> | </span></li>
<li role="presentation">Tab 3<span> | </span></li>
<li role="presentation">Tab 4</li>
</ul>
By clicking the links the corresponding tabs opened.
By clicking the browser back button the corresponding tabs not opened.
For this I used the following code:
$('.goto').click(function (e) {
e.preventDefault();
history.pushState( null, null, $(this).attr('href') );
});
This is working.
By default, the tab1 is opened.Now I click tab2, and 3, and 4.
BY clicking the browser back button, it correspondingly opens the tab 3,2
But tab 1 is not opened. At that time the url is (http://url.com instead of http://url.com/#tab1)
How to fix this. Please help me
remove class="active" and let him or her choose ^^ and normally it should work.
<li role="presentation">
<a href="#tab1" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-tab" aria-expanded="true" class="goto">
Tab 1
</a>
<span> | </span>
</li>
Related
I have tables called: 1) purchase_requisitions; 2) liquidations. Assuming that I have 100 data for both purchase requisitions and liquidations.
In our application, we have all the lists of users and when the client clicked a certain user, there will be a modal that will pop-up.
In this modal you can see all the records for that user and also there's 2 tab. 1) Purchase Requisition tab; 2) Liquidations tab.
Purchase Requisition is the active tab once the client clicked the certain user and this is where I'm fetching the data of purchase requisitions.
Now what I want is, I dont want to load the 100 data of purchase requisitions and liquidations at the same time.
I want to load the liquidations, for example when I clicked the liquidations tab.
Question: Why does my click event is not working?
Tab pane
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
Javascript
<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
// .... code
}
$(document).ready(function(){
var vendor_id = "<?= $vendor->id; ?>";
var start_date = "<?= $start_date;?>";
var end_date = "<?= $end_date;?>";
if ($('.purchases-payments').length > 0) {
$('div').click('.purchases-payments',function(e){
// $('.purchases-payments').click(function(e){
$('.purchases-payments-details').html('');
getPurchasesPayments(vendor_id,start_date,end_date);
e.preventDefault();
return false;
})
}
if ($('.liquidations').length > 0) {
$('div').click('.liquidations',function(e){
// $('.liquidations').click(function(e){
alert('test');
e.preventDefault();
return false;
})
}
// if ($('.liquidations').hasClass('active')) {
// alert('liquidations active');
// }
})
You're targeting "div" in your jQuery click code, but you want to target your a elements, you should also add classes or ids to this elements which you will be targeting.
Add ids to your a elements
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a id="purchases" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li id="liquidations" class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
</ul>
and in your javascript:
$(document).ready(function(){
$('#purchases').click(function(e){
// your code
});
$('#liquidations').click(function(e){
// your code
});
})
I have an issue with my web application. The issue is that on Safari for iPad I have to click 2 times to actually perform the click on the <a> tag. The first one performs a hover like when you hover with the mouse on desktop. I am using AngularJS. I tried on firefox, it works just fine. Here is my code :
<ul class="navigation">
<li class="navigation-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']" class="navigation-link" role="button">
menu1
</a>
</li>
<li class="navigation-item" [routerLinkActive]="['active']">
<a [routerLink]="[myRoute]" class="navigation-link" role="button">
menu2
</a>
</li>
<li class="navigation-item" [routerLinkActive]="['active']">
<a [routerLink]="[myRoute2]" class="navigation-link" role="button">
menu3
</a>
</li>
</ul>
I tried adding (onclick)=" " or ng-onclick=" " or style="cursor:pointer" so the hover doesn't trigger but none of this worked.
Thank you for your help
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
I am trying to create a Bootstrap dropdown menu with two sub-menus. My problem is that the dropdowns are dynamically created after the document is loaded, and don't respond to how I would normally get them to work.
How I would normally go about it would be
$(document).ready(function(){
addItem(); //adds the first instance of the drop down
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(e){
e.stopPropagation();
e.preventDefault();
$(this).siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
});
But this obviously doesn't work for dynamically created content. I saw elsewhere online that this would work for dynamic content;
//still has first instance of dropdown, just later in the doc
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
e.stopPropagation();
e.preventDefault();
$(this).siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
but for the life of me, I can't figure out why this doesn't work. What I'm seeing is that it is adding the open class to the sub-menu, but toggle the parent menu(not stopping propagation?) So, my question is, why doesn't the second one execute as expected, and how can I make it?
List structure for reference:
<div class="dropdown open">
<button id="select0" class="btn new-btn" data-toggle="dropdown" aria-expanded="true">Select Your Item <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="sub" data-toggle="dropdown">Item 1</a>
<ul class="dropdown-menu sub-menu">
<li><a data-def-cost="6">Item 1.1</a></li>
<li><a data-def-cost="8">Item 1.2</a></li>
</ul>
</li>
<li><a class="sub" data-toggle="dropdown">Item 2</a>
<ul class="dropdown-menu sub-menu">
<li><a data-def-cost="5">Item 2.1</a></li>
<li><a data-def-cost="3">Item 2.2</a></li>
</ul>
</li>
<li><a data-plu="xyz" data-def-cost="8.00">Item 3</a></li>
<li><a data-plu="xyz" data-def-cost="8.00">Item 4</a></li>
<li><a data-plu="xyz" data-def-cost="10.00">Item 5</a></li>
<li class="dropdown-header">Other Items</li>
<li><a data-plu="143">Item 6</a></li>
<li><a data-plu="xyz">Item 7</a></li>
<li><a data-plu="xyz">Item 8</a></li>
</ul>
<input type="text" class="hidden" name="input1">
<input type="text" class="hidden" name="otherinput1">
</div>
$(this).siblings() points to an ul element, however, the .open class is supposed to be added to the parent li : http://getbootstrap.com/javascript/#dropdowns-usage.
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
Here is a suggestion (inspired by the following code snippet : Multi-Level Dropdowns) :
$(document).ready(function () {
// this variable keeps track of the last open menus
// in order to close them when another link is clicked
// or when the entire dropdown is closed
var open;
$("#my-dropdown").on("hide.bs.dropdown", function () {
if (open) open.removeClass("open");
});
$(".dropdown-submenu > a").on("click", function (e) {
if (open) open.removeClass("open");
open = $(this).parents(".dropdown-submenu");
open.addClass("open");
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="my-dropdown">
<button type="button" data-toggle="dropdown">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li class="dropdown-submenu">
Submenu 1
<ul class="dropdown-menu">
<li>Action 1.1</li>
<li>Action 1.2</li>
</ul>
</li>
<li class="dropdown-submenu">
Submenu 2
<ul class="dropdown-menu">
<li>Action 2.1</li>
<li>Action 2.2</li>
<li class="dropdown-submenu">
Submenu 2.3
<ul class="dropdown-menu">
<li>Action 2.3.1</li>
<li>Action 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unsure as to efficiency of my solution, but I rearranged the order a bit, and forced the parent to stay open
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
$(this).siblings().removeClass("open");
$(this).parent().addClass("open");
$(this).parent().parent().parent().addClass("open");
e.stopPropagation();
e.preventDefault();
});
and this solved my issue
use one of these below lines.
$(this).siblings('.dropdown-menu').removeClass('open');
$(this).next('.dropdown-menu').removeClass('open');
What I would like to happen: The first three list items in the nav bar should correspond to the first three content items in the content area. The three list items in the dropdown should correspond to the remaining three content items. Hovering over the dropdown icon should display the list but the dropdown icon shouldn't link to anywhere.
What's actually happening: The first three list items work properly and link to the first three content items. The dropdown box animates properly, but the items in it all link to the 4th content item. Clicking the dropdown box's icon also links to the 4th item.
Here is the code (A lot of the code is generated, so I grabbed the code from FireBug, which is why the "uk-active" classes and "aria-hidden" attributes are there):
<nav class="uk-navbar">
<ul class="uk-navbar-nav" data-uk-switcher="{connect:'#content-area'}">
<li class="uk-active" aria-expanded="true">
Dashboard
</li>
<li aria-expanded="false">
Summary
</li>
<li aria-expanded="false">
Details
</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown="" aria-expanded="false" aria-haspopup="true">
<a href="">
<i class="uk-icon-cog"></i>
</a>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" aria-hidden="true" style="top: 40px; left: 0px;" tabindex="">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li>
Upgrade
</li>
<li>
Configure
</li>
<li>
Settings
</li>
</ul>
</div>
</li>
</ul>
</nav>
<ul id="content-area" class="uk-switcher">
<li id="content-dashboard" class="parent.uk-container uk-container-center uk-active" aria-hidden="false">...</li>
<li id="content-summary" aria-hidden="true">...</li>
<li id="content-details" aria-hidden="true">...</li>
<li id="content-upgrade" aria-hidden="true">...</li>
<li id="content-config" aria-hidden="true">...</li>
<li id="content-settings" aria-hidden="true">...</li>
</ul>
Basically, the "on click" event handler for the 4th content item is getting added to the "settings-btn-container" list item and no event handlers are getting added to the list items under the dropdown. I can't figure out how to get the event handlers to bind to the dropdown list items instead.
Try being more explicit to the UIkit Switcher component about what constitutes a "toggle".
In the snippet below, I've used these settings:
{
connect: '#content-area',
toggle: '.toggle-link'
}
The default value for toggle, in the UIkit Switcher component is >*, which you'll probably recognize as a selector for "the first immediate child element of any type". Since the links in your dropdown are not immediate descendants, no Switcher events were fired when they were clicked.
By broadening the "toggle" definition to all .toggle-link elements in the switcher, each of your links gets mapped to the corresponding <li> in the #content-area element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css'>
<nav class="uk-navbar">
<ul id="switcher-menu" class="uk-navbar-nav" data-uk-switcher="{connect: '#content-area', toggle: '.toggle-link'}">
<li class="uk-active toggle-link">Dashboard</li>
<li class="toggle-link">Summary</li>
<li class="toggle-link">Details</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown>
<i class="uk-icon-cog"></i>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li class="toggle-link">Upgrade</li>
<li class="toggle-link">Configure</li>
<li class="toggle-link">Settings</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="uk-container uk-container-center">
<ul id="content-area" class="uk-switcher">
<li class="uk-active">... (Dashboard)</li>
<li>... (Content Summary)</li>
<li>... (Content Details)</li>
<li>... (Content Upgrade)</li>
<li>... (Content Config)</li>
<li>... (Content Settings)</li>
</ul>
</div>
I would like to get the value "3 Sent" from the hmtl below. How can I do this?
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
EDIT: Apologies everyone, I wasn't clear on what I was after.
The value "3 Sent" changes all the time, can be "1 Sent, 2 Sent" etc. It is a clickable link so I want to be able to click on it.,
Thanks.
Possible with xpath text based search. I believe you are looking for a selector
//a[.='3 Sent']
Edit
Just simply use css selector then,
a[href='#sent']
Try this
The anchor tag when gets clicked it search for the text
$('.nav li a').on('click', function(e){
e.preventDefault();
console.log("Value is " + $(this).text());
});
You can simply get it using below code:
$(document).ready(function(){
$('li').find('a').each(function() {
if($(this).attr('href')=="#sent")
{
alert($(this).text());
}
});
});
Here is JSFiddle
From the class .active in the next list element get the text in anchor.
var textInAnchor = document.querySelector(".active + li a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
from the class .some-tabs find the child list element in the second position then return his anchor text
var textInAnchor = document.querySelector(".some-tabs > li:nth-child(2) a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
Get the href with value = #sent the return the text
var textInAnchor = document.querySelector("[href='#sent']").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>