i did not understand how can i use AlloyUI dropdown script. i have write this code 5 time on my same page.
<div id="myDropdown" class="dropdown">
<button id="myTrigger" class="btn btn-default dropdown-toggle" type="button">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
</ul>
</div>
in this html have same classes and id, and i use this script. i take this code from alloy. follow this http://alloyui.com/examples/dropdown/
YUI().use(
'aui-dropdown',
function(Y) {
new Y.Dropdown(
{
boundingBox: '#myDropdown',
trigger: '#myTrigger'
}
).render();
}
);
i have 5 dropdown on my same page with same html code. when i run this code my first drop down is working and other is not working.
Related
I have common header file includes navbar in which have multilanguage dropdown.
when i select dropdown language, translates page without any issues.
But when i move to other pages, if should reflect the language selected on first page (eg) if th is selected on first page, other page should be /th instead of '/en'
currently common header file is always /en, when i chose dropdown how i update a href links javascript
need to update all href links when particular language is selected from dropdown.
//header.ejs
<body>
<nav>
<ul>
<li class="nav-item">
<a class="nav-link" href="/en/about" style="margin-right: 1.5rem!important;">about us</a>//change this link
</li>
<li class=" nav-item">
<a class="nav-link" href="/en/contact"
style="margin-right: 1.5rem!important;">contact us</a>
</li>//change this link
</ul>
<div class="dropdown">
<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
<a class="dropdown-item" href="javascript:" onclick="setLanguage('en')">English</a>
<a class="dropdown-item" href="javascript:" onclick="setLanguage('th')">Thai</a>
</div>
</div>
</nav>
</body>
on load see if language is set or not in cookie.
set selected language in cookie on setLanguage call.
$(document).ready(function() {
//read previously set cookie value
var selectedLanguage = $.cookie( 'selectedLanguage' );
// 1. on load see if language is set or not in cookie.
selectedLanguage = selectedLanguage ? selectedLanguage : 'en';
setLanguage(selectedLanguage);
function setLanguage(lan){
$.cookie('selectedLanguage', lan);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y=" crossorigin="anonymous"></script>
I'm getting desperate about fixing a problem I am facing. With a button I open a dropdown menu. I want to get the value of what I selected (better: the index of what I selected, the "position") when I select something in the onClick function and update my HighChart with the function updateChartDataByCourse(position) with it as a parameter. The function works fine. The page uses jsp. My code is the following:
creating button and dropdownmenu:
<div class="dropdown" style="display: inline-block; margin-right: 10px">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Kurs auswählen:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu" id="course" onclick="enableLFields()">
<li class="dropdown-header">Kursliste</li>
<li><c:forEach items="${teachersCourses}" var="course"><a href="#">
<option value="${course.id}">${course.name}</option>
</a></c:forEach></li>
</ul>
</div>
and then the onClick-function:
$("#course li a").click(function(){
$("#dropdownMenu1:first-child").text("Kurs: " + $(this).text());
$("#dropdownMenu1:first-child").val($(this).text());
indexOrIdThatShallBePassed = $("#dropdownMenu1").val();
updateChartDataByCourse(**indexOrIdThatSallBePassed**);
var dropdown = $("#dropdownMenu1");
console says this index is undefined. I don't get it!
To get the value of the clicked item, you could do something like that:
$(this).find('option').attr('value')
Then you would have your indexOrIdThatShallBePassed variable set.
I have a Bootstrap single-button dropdown and I would like to click on one of the options appearing in the dropdown using Protractor. How do I accomplish this?
<div class="btn-group" ng-if="!persist.edit" dropdown>
<button type="button"
class="btn btn-default"
dropdown-toggle>
<span translate="GENERAL.ACTIONS"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Check In -->
<li role="presentation">
<a ng-click="checkIn()"
role="menuitem"
tabindex="-1"
translate="ITEMS.LIST.BUTTON_CHECK_ITEM_IN">
</a>
</li>
<!-- Check Out -->
<li role="presentation"">
<a ng-click="checkOut()"
role="menuitem"
tabindex="-1"
translate="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"
translate-value-length="1">
</a>
</li>
</ul>
</div>
I tried this (dropdown is called, but click fails):
it('Should click Actions button and show dropdown', function(){
element(by.buttonText("Actions")).click();
browser.sleep(1000);
});
it('Should click the Check Item Out dropdown option and change status to checked out', function(){
element(by.css('[value="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"]')).click();
});
First, click the "dropdown toggle" button to open up the dropdown. Then, select an option:
var dropDown = element(by.css("div[dropdown]"));
dropDown.element(by.css("button[dropdown-toggle]")).click();
dropDown.element(by.css("a[ng-click*=checkIn]")).click(); // Check In
Working code:
element(by.buttonText("Actions")).click();
element(by.css('[ng-click="]checkIn()"]')).click(); // Check In
A clean solution to select from Bootstrap Dropdown is to click by buttonText and then by linkText:
element(by.buttonText('your button')).click();
element(by.linkText('your selection')).click();
Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?
I've determined that this is possible using Javascript, with JSFiddle here. However, I would like to accomplish this without using additional JS if possible.
<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
First Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
Second Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<script type="text/javascript">
// Hide backdrop from #firstDropdown.
// This can be done with JS as below. Can it be done with only CSS?
$('#firstDropdown').on('show.bs.dropdown', function () {
$(".dropdown-backdrop").hide();
});
</script>
Found solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique ID, so simply using display:none; in CSS works fine, as in:
#firstDropdown .dropdown-backdrop {
display:none;
}
And then all other dropdowns (except #firstDropdown) will still have a backdrop as normal.
See JSFiddle updated.
I'm having a little issue while trying to show some data (Villains/Villanos) in a drop down with a ng-repeat. I've been looking around and trying but I can't make it work. I have the following HTML:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js" </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
<script>
// This function lets the dropdown button save the name of the Villain that it's selected.
$(function(){
$(".dropdown-menu li a").click(function(){
$(".dropdown-toggle:first-child").text($(this).text());
$(".dropdown-toggle:first-child").val($(this).text());
});
});
</script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle dropdown-suspects-sides" type="button" id="dropdownMenu1" data-toggle="dropdown">
Suspects
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="suspect" role="presentation" data-ng-repeat = "villain in villains">
<a role="menuitem" tabindex="-1" href="#">
<span class="glyphicon glyphicon-user"></span> {{villain}}
</a>
</li>
</ul>
</div>
/* Controllers */
...
$scope.getVillains = function() {
$http.get("/getVillains")
.success(function(data) {
$scope.villains = data
}
)
};
...
As you can see, I'm trying to make a dropdown to show all the Villains I have. The items appear correctly if they're showed in a normal list so the items can be "used", but they're not appearing if I try to show them this way. I'm pretty sure I'm doing something wrong here but I can't guess what is it. Thanks in advance!