I have a bootstrap dropdown menu that is populated with time zone information. The dropdown is correctly populated but when i click on the dropdown and press a key on the keyboard (for example "P") it does not select an appropriate item on the list. The code for the dropdown is bellow.
HTML
<select class="form-control" name="timeZone" ng-model="engagement.timeZone" ng-init="engagement.timeZone=timezones[37].code" ng-options="timeZone.code as timeZone.name for timeZone in timezones" required></select>
The output is something like this.
What i want is if i press A on the keyboard first item matching the letter should be selected. (not to be confused with a filtering like behaviour)
UPDATE
This does not seem to relate to bootstrap at all. I removed all the bootstrap classes and it still is the same. May be something to do with Angular?
As you know using Boostrap drop-down components you are not able to select an element by pressing the Keyboard Letter. So you can utilize the following code which uses a directive;
myApp.directive('keypressEvents',
function ($document, $rootScope) {
return {
restrict: 'A',
link: function (scope, element, attr) {
console.log('linked');
$document.bind('keypress', function (e) {
$rootScope.$broadcast('keypress', e, String.fromCharCode(e.which));
var letter = String.fromCharCode(e.which);
var target = e.target;
var charat = element[0].textContent.charAt(0);
if(charat === letter){
element.addClass("red");
}
});
}
}
});
Up there, you get to see the directive used, it simply is bounding on the keypressed and in the end set the class for the element found with the very same first letter. Nevertheless, you just need to set the focus on this;
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li keypress-events>action</li>
<li keypress-events>something else here</li>
</ul>
</div>
As you can see, the directive has been bounded on the li elements.
Related
I have three drop-down menus on my site that I created via Bootstrap.
Ideally, when a user clicks on a drop-down menu and selects one of the inner menu items, the drop-down menu should update its text content to the text content of the selected menu item.
However, for any drop-down menu, if a user clicks on a menu item, all three drop-down menus' text content update instead of only that individual drop-down menu as seen below
My current approach is that the aria-expanded attribute for each drop-down button changes to true if a drop-down is open on a button. If the aria-expanded value of a specific drop-down menu is true, then that button's text content changes to the text content of the selected menu item.
JS
function addPlanesToDropDowns() {
let dropdowns = document.querySelector('.dropdown-menu');
let dropDownButtonOne = document.querySelector('#dropdownMenuButtonOne');
let dropDownButtonTwo = document.querySelector("#dropdownMenuButtonTwo");
let dropDownButtonThree = document.querySelector("#dropdownMenuButtonThree");
dropDownDisabledCheck();
for (let i = 0; i < state.airplaneData.length; i++) {
let dropDownMenuItem = document.createElement('a');
dropDownMenuItem.classList.add('dropdown-item');
dropDownMenuItem.href = '#';
dropDownMenuItem.textContent = state.airplaneData[i].make + " " + state.airplaneData[i].model;
dropDownMenuItem.addEventListener('click', function (event) {
event.preventDefault();
if (dropDownButtonOne.getAttribute('aria-expanded')) {
dropDownButtonOne.textContent = dropDownMenuItem.textContent;
dropDownButtonOne.setAttribute('aria-expanded', false);
}
if (dropDownButtonTwo.getAttribute('aria-expanded')) {
dropDownButtonTwo.textContent = dropDownMenuItem.textContent;
dropDownButtonTwo.setAttribute('aria-expanded', false);
}
if (dropDownButtonThree.getAttribute('aria-expanded')) {
dropDownButtonThree.textContent = dropDownMenuItem.textContent;
dropDownButtonThree.setAttribute('aria-expanded', false);
}
dropDownDisabledCheck();
});
dropdowns.appendChild(dropDownMenuItem);
}
}
HTML
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonOne" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 1</button>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonTwo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 2</button>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonThree" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 3</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- <a class="dropdown-item" href="#">Planes go here</a> -->
</div>
</div>
Despite this, all three drop-down menus update with the same selected menu item text content even though I am only setting the text content on the button element with the specific ID attribute.
This fragment of code dropDownButtonOne.getAttribute('aria-expanded') returns a string, not a boolean value, so either "true" or "false".
As it is a non-empty string, it always evaluates to TRUE. You need to change your condition.
You could check if(dropDownButtonOne.getAttribute('aria-expanded') === "true") for example.
I have the following inline styles for a dropdown menu list. I do not know how to make it in to 'click' using jQuery.
<button class="btn btn-primary mw" data-toggle="dropdown"><span class="caret">Subject</span></button>
<div class="dropdown-menu">
<a class="dropdown-item Business" onclick="selectBusiness()"> Business</a>
<a class="dropdown-item ICT" onclick="selectICT()"> ICT</a>
<a class="dropdown-item Arts" onclick="selectArts()"> Arts</a>
</div>
More information:
I tried to do this following code for a button and it's working fine. But as I said I do not know how to make it work for a dropdown menu.
var btn = document.querySelector("button.selectAll");
btn.addEventListener("click", selectAll);
....
Your input would be greatly appreciated!
If you want to use jQuery, you can add listener to the classes of each <a> inside your dropdown.
$(".Business").on('click', function() {
//selectBusiness() or your code here
});
$(".Arts").on('click', function() {
//selectarts() or your code here
});
$(".ICT").on('click', function() {
//selectICT() or your code here
});
Another solution would be to add a single listener for all your dropdown-items and then checking the content of the selected one.
$(".dropdown-item").on('click', function() {
switch ($(this).text()) {
case "Business":
selectBusiness();
break;
}
});
I've got an application requiring a series of dropdowns. The functionality requires me to be able to switch between normal dropdown behavior and multi-select behavior.
I have made slight modifications to the ui.boostrap.dropdown from the Angular Directives for Bootstrap (see Dropdown). Everything works well, except for a gray bar after clicking (looks like the :hover css stays active after clicking) when in Multiselect mode.
When I toggle off then back on, the highlight goes away, as if the hover event has somehow completed.
Process:
Open the dropdown
Click Multiselect
Move the mouse and Multiselect stays highlighted, as if the ":focus" tag is not removed.
Visually:
The mouse is over 345 in this image, Multiselect should not be highlighted.
Angular HTML for dropdown:
<div ng-controller="DropdownCompanyController as vm">
<div class="btn-group u-front_dropdown-wide" dropdown is-open="vm.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{ vm.selected }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-click="vm.checkMultiSelect($event)">
<li ng-repeat="company in vm.companies"
ng-class="{ selected : company.selected }">
{{ company.name }}
</li>
<li class="divider"></li>
<li class="ng-scope" ng-class="{selected : vm.multi.select }">
<a href="#"
ng-click="vm.event.multiselect()"
ng-class="{ multi: vm.multi.select }">Multiselect</a>
<button
ng-hide="!vm.multi.select"
ng-class="{ multi_button: vm.multi.select }"
ng-click="vm.event.close_dropdown($event)">Close</button>
</li>
</ul>
</div>
</div>
Here's the event where the click on an element is handled:
vm.event = {};
vm.event.select = function(company) {
if (!vm.multi.select) {
clearCompanies(false);
company.selected = true;
vm.selected = company.name;
vm.isopen = false;
} else {
if (company.name !== vm.defaultCompany) {
company.selected = !company.selected;
vm.selected = vm.multi.title + countCompanies();
}
}
};
Link to Plunker.
I have had no luck tracking this down and my instinct is that the issue is in the CSS, but it's standard bootstrap CSS. Any assistance would be appreciated.
If you just dont want any item to have the highlight then in your own custom app.css file override the focus state with white:
.dropdown-menu > li > a:focus {
background-color: white;
}
Without doing a custom bootstrap build just add the hover following the focus to to keep the grey highlight:
.dropdown-menu > li > a:hover {
background-color: lightgray;
}
When I click on the input my dropdownmenu is expanded, what I need is to expand it automatically Onkeyup event.
I'm trying the following but not working.
HTML
<div class="btn-group DropDownMenu">
<input id="input1" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" type="text" onkeyup = "Filter()">
<ul class="dropdown-menu">
<li></li>
</ul>
</div>
JavaScript
function Filter() {
//some other code
$("#input1").click();
}
Any thoughts ? I'm using bootstrap btw
remove class="dropdown-toggle" and data-toogle="dropdown" from input and this to JS
$(".dropdown").keyup(function (event) {
//preventing default behaviour of bootstrap
event.stopPropagation();
$('.dropdown-menu').dropdown().toggle();
});
I don't know where have you written the javascript.
I have created a fiddle and changed the javascript a little:
window.Filter = function() {
$("#input1").click();
}
it is working in the fiddle. http://jsfiddle.net/dyo8fowt/
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>