I have a dropdown list with 5 elements which are displayed inside the button when pressed.
Right now, the button gets the value of selected tab but I want it to have a default text before this value; this text should be "Filter by:" value. And I also need that caret to be displayed...Any ideas how I can get this working?
HTML:
<div class='filtering_options dropdown'>
<button class="btn bet-filter btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Filter by:
<span class="caret"></span>
</button>
<ul class="dropdown-menu CHECK-HEIGHT" aria-labelledby="dropdownMenu1">
<li><a href='#brzn/yolo/all' class='btn btn-filter all' data-filter='all'>{{translate 'bets_filter_all'}}</a></li>
<li><a href='#brzn/yolo/open' class='btn btn-filter open' data-filter='open'>{{translate 'bets_filter_open'}}</a></li>
<li><a href='#brzn/yolo/closed' class='btn btn-filter closed' data-filter='closed'>{{translate 'bets_filter_closed'}}</a></li>
<li><a href='#brzn/yolo/pending' class='btn btn-filter pending' data-filter='pending'>{{translate 'bets_filter_ended'}}</a></li>
<li><a href='#brzn/yolo/resolved' class='btn btn-filter resolved' data-filter='resolved'>{{translate 'bets_filter_resolved'}}</a></li>
</ul>
</div>
JS with coffeescript:
filter: (filter)->
# set default values for the filter
if _.isEmpty(filter)
filter = #default_filter
if filter.dir
filter.dir = parseInt(filter.dir) || 0
if !(filter.status in ['all', 'open', 'closed', 'pending', 'resolved'])
filter.status = 'all'
prev_filter = #filter_options
#filter_options = _.extend({}, #default_filter, filter)
if _.isEqual(#filter_options, prev_filter)
return
#update_comments(#filter_options)
#$('.btn-filter.active').not(".btn-filter.#{filter.status}").removeClass('active')
#$(".btn-filter.#{filter.status}").addClass('active')
#$(".bet-filter").text(filter.status)
Found the solution by myself:
Created a new translation for 'Filter by'
Concatenate this translation with value
#$(".bet-filter").text((#app.translate('filter_by')) + (filter.status))
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.
Here is my code for Dropdown Menu Appear and Disappear..
If the class name is "dropdown pull-right" then the menu will be closed
If the class name is "dropdown pull-right open" then the menu will be opened
<li class="dropdown pull-right" id="tobechanged">
<a data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
</li>
So, i wrote this query
$(".dropdown-toggle" ).click(function() {
console.log(document.getElementById("tobechanged").className);
if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
console.log('opening menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
}
else
{
console.log('closing menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
}
});
It works only in the first time. If i change to another page only the console console.log('opening menu'); works and the class name is changing..
What is the mistake i am doing and how can i make the class name change ?
Note : I am using angularjs, so the page won't be reloaded entirely
I think you should change the Class of the Parent li Element not the a Element inside it.
The issue I see is that once you execute the line:
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
This basically will change your html from :
<li class="dropdown pull-right" id="tobechanged">
<a data-toggle="dropdown" class="**dropdown-toggle**" aria-expanded="false">
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
</li>
into
<li class="dropdown pull-right" id="tobechanged">
<a data-toggle="dropdown" class="**dropdown pull-right open**" aria-expanded="false">
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
</li>
Making basically your element no longer available for click event, because the click is subscribed to an element by class name which you change.
$(".dropdown-toggle" )
Hope this is not too confusing.
A fix plus some additional improvements; no need to search for the elements a couple of times
$(".dropdown-toggle" ).click(function() {
var el = document.getElementById("tobechanged");
if (el.className == "dropdown pull-right" ) {
console.log('opening menu');
el.className = "dropdown pull-right open";
}
else {
console.log('closing menu');
el.className = "dropdown pull-right";
}
});
To do it in in JQuery :
$(".dropdown-toggle" ).click(function() {
$(this).closest('#tobechanged').toggleClass('open');
});
Update:
Demo https://jsfiddle.net/n13svnLL/
<pre>you are assigning class name only for dropdown-toggle so it will work only one time for that you have to assign same class name to id (tobechanged) as well</pre>
if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
console.log('opening menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
document.getElementById("tobechanged").className == "dropdown pull-right open";
}
else
{
console.log('closing menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
document.getElementById("tobechanged").className == "dropdown pull-right"
}
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.
Here is my div :
<div id="myDiv">The
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best</span>
way to receive congrats
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are</span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> to give a correct answer.</div>
I would like to get this text : "The best way to receive congrats are to give a correct answer."
So I call $('#myDiv').text(). It does not work since I get the two elements in ul.dropdown-menu.
The next step is to filter or remove the un-wanted children, i.e.:
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
I tried to play with $.filter or $.not or $.children with jquery selectors, etc. I cannot find the correct way to do this. Need help!
You can find some code in jsfiddle : http://jsfiddle.net/Ku7FY/
[EDIT]
One solution suggests this code :
$('#result').append( $('#myDiv').text().replace($(".btn-group").text(),"") ).append('<br />')
If several div.btn-group exists, just loop as :
var result = $('#myDiv').text();
$(".btn-group").each(function() {
result = result.replace($(this).text(),"");
});
$('#result').append(result).append('<br />')
So, if I get this straight, you want to exclude the list from the .text(). Try something like:
$('#result').append( $('#myDiv').text().replace($(".dropdown-menu").text(),"") ).append('<br />')
If you don't mind placing all the "dumb" text in spans, then you can do it very simply by only grabbing "dumb" text spans and ".cordial-err-corr" spans (and a find()).
<div class="well" id="myDiv"><span class="cordial-content">The </span>
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best </span>
<span class="cordial-content">way to receive congrats </span>
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are </span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> <span class="cordial-content">to give a correct answer. </span></div>
and
$('#myDiv').find('.cordial-err-corr,.cordial-content').text()
Demo: Fiddle
I have an ugly, though simple enough (I guess) method:
We can make a copy, then remove the dom elements we don't want to display. Then we can get the desired text.
var clone_div = $('#myDiv').clone();
clone_div.find('.btn-group').remove();
$('#result').append(clone_div.text()).append('<br />');
Here is jsfiddle. http://jsfiddle.net/Ku7FY/4/
Try
function process(el){
var array = [];
$(el).contents().each(function(){
var $this = $(this), text;
if(this.nodeType == 3){
text = $.trim($this.text());
if(text){
array.push(text)
}
} else if($this.is(':not(.btn-group)')){
Array.prototype.push.apply(array, process(this))
}
})
return array;
}
console.log(process($('#myDiv')).join(' '))
Demo: Fiddle