We Keep Coding

Beginner: get the value of dropdown selection javascript/html/jsp

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.

UI bootstrap dropdown toggle needs to be clicked twice if closed manually

I am using UI Bootstrap drop-down component to show angular-bootstrap-datetimepicker calendar on click. I have also added a $watch to close the dropdown after date is selected.
Plunker
<div uib-dropdown id="calendar1">
<h4>
<a uib-dropdown-toggle id="calendar1-toggle" href="">Select Date <b class="caret"></b>
</a>
</h4>
<ul uib-dropdown-menu>
<datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
</ul>
</div>
$scope.$watch('date', function(newValue){
angular.element(document.getElementById('calendar1')).removeClass('open');
})
The removeClass('open') worked but also brought a new issue. After you selected a date (removeClass('open') called) you have to click the dropdown toggle twice to make it open.
I looked into uib source code, did some digging and tried the following:
window.angular.element(document.getElementById('calendar1')).removeClass('open');
window.angular.element(document.getElementById('calendar1-toggle'))
.removeClass('collapse')
.addClass('collapsing')
.attr('aria-expanded', false)
.attr('aria-hidden', true);
But I still had to press toggle twice. What am I doing wrong?

Manually changing classes is not how you open/close a uib-dropdown why are you doing it that way? The docs clearly show the is-open attribute for hiding/showing the dropdown:
Markup:
<div uib-dropdown id="calendar1" is-open="dropdownOpen">
<h4>
<a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
</a>
</h4>
<ul uib-dropdown-menu>
<datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }">
</datetimepicker>
</ul>
</div>
Script:
$scope.$watch('date',function(newValue){
//angular.element(document.getElementById('calendar1')).removeClass('open')
$scope.dropdownOpen = false;
});
Plunker: https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview

i did not understand how can i use AlloyUI dropdown script

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.

Hide bootstrap's .dropdown-backdrop, CSS only

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.

Bootstrap Dropdown + Angular data-ng-repeat

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!