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!
Related
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 asked a question earlier but didn't phrase it correctly.
I am working with jQuery and Bootstrap for pretty much the first time and need some help.
I have an .aspx webpage that has this code:
<form method="POST" action="Search.aspx">
<div>
<input type="text" class="form-control" name="srchterm" id="srchterm" style="width: 300px" />
<button id="Submit" class="btn btn-primary" type="submit">
GO!</button>
</div>
<br />
<div>
<div class="btn-group">
<a id="reportType" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#"
name="rptType">Select report type<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="1">All</li>
<li id="2">Some</li>
<li id="3">None</li>
</ul>
</div>
<div class="btn-group">
<a id="reportStatus" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">
Report Status<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="1">Active</li>
<li id="2">Archived</li>
<li id="3">All</li>
</ul>
</div>
</div>
</div>
</form>
What I would like to know is how I can pass the value of the selected unordered list item to the code behind using JQuery or AJAX. Neither method I know much (or to be totally honest) anything about.
When I hit the submit button it takes the text box value and passes that back to Request.Form("srchTerm") but i cant seem to get anything else to pass.
I have seen this link here at fiddle but cant seem to get it to work for me.
I am wondering if its because how I have declared my listbox, but do need help in order to get this to work.
If I am missing a tag, please let me know. But I would very much appreciate the help with the JavaScript to get this wired up to pass the data so I can call the information from my database.
====================================
edit 1
I've tried various methods, none of which i have kept, but this is that i have right now and cant get anything to pass a value across.
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
$('.reportType li').click(function () {
value1 = $(this).attr('value');
});
$('.reportStatus li').click(function () {
value2 = $(this).attr('value');
});
$('#Submit').click(function () {
alert('value1 = ' + value1 + ' | value2 = ' + value2);
});
If you must have dropdown list and you want to maintain this type of functionality, then i'd simply use hidden input fields something like this:
<div class="btn-group">
<input type="hidden" id="reportStatus" name="reportStatus" />
<a class="btn btn-default dropdown-toggle btn-select"
data-toggle="dropdown" href="#">
Report Status
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li data-val="1">Active</li>
<li data-val="2">Archived</li>
<li data-val="3">All</li>
</ul>
</div>
JS will be something like:
//$(function () {
// $("#reportStatus").parents("div").find("li").click(function () {
// value = $(this).attr("data-val");
// $("#reportStatus").val(value);
// })
//});
//or something more general:
$(function () {
$(".btn-group").each(function (index, item) {
myInput = $(item).children("input");
$(item).find("li").click(function () {
value = $(this).attr("data-val");
myInput.val(value);
});
});
});
fiddle here
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();
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.
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.