I am using bootstrap dropDown html and I am trying to display the text of the selected item Note: I have a set of 3 dropDowns:
<ul id="filters" class="nav navbar-nav navbar-right">
<li class="option-combo dropdown Agency">
<a class="btn btn-default btn-lg dropdown-toggle">
Agency <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agency">
<li><a class="btn btn-default btn-lg" href="#">All</a></li>
<li><a class="btn btn-default btn-lg selected" href="#filter-agency-TBWA">TBWA</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-agency-Ogilvy">Ogilvy</a></li>
</ul>
</li>
<li class="option-combo dropdown Client">
<a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Client <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu">
<li>All</li>
<li><a class="btn btn-default btn-lg" href="#filter-client-Sky" data-filter-value=".Sky">Sky</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-client-Vodafone" data-filter-value=".Vodafone">Vodafone</a></li>
</ul>
</li>
<li class="option-combo dropdown Year">
<a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Client <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu">
<li><a class="btn btn-default btn-lg" ref="#" data-filter-value="">All</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2013">2013</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2014">2014</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2012">2012</a></li>
</ul>
</li>
</ul>
The jQuery I tried with no luck:
$('.filter').on('click', 'a', function() {
var $text = $(this).text();
$(this).prev(".dropdown-toggle").text($text);
});
This works, but it's ugly. Change:
$(this).prev(".dropdown-toggle").text($text);
to:
$(this).parent().parent().siblings(".dropdown-toggle").html($text + ' <span class="caret"></span>');
I'm sure there's a better way to do that, but since you're clicking on the <a> inside an <li> inside a <ul>, .parent().parent()siblings()... does the trick, as it will select the sibling of the <ul> that has a class of .dropdown-toggle, and change it's display text to that of the click <a> tag.
Hope that makes sense!
Edited to add the caret.
Bootply Example
This solution is cleaner than using parent() jquery because it finds the closest (traveling up the dom tree) class dropdown and then within that finds dropdown-toggle class (traveling down the tree). as long as your dropdowns all have class dropdown in the outer div and the dropdown-toggle in the inner div, it doesnt matter the order in which your html is structured:
$('.filter').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
hope this helps!
Here a clean way to do this: http://jsfiddle.net/4g01b2tb/2/
$('.filter').click(function (event) {
var targetText=event.target.text;
$(this).prev('.btn').text(targetText);
});
Related
Im having this code with a ui-bootstrap dropdown:
<div class="btn-group" style="float: right" uib-dropdown keyboard-nav dropdown-append-to="projectTreeBtn.add">
<button type="button" class="btn btn-default projectTreeBtn" ng-click="deleteElement()"><span class="glyphicon glyphicon-remove"></span> Löschen</button>
<button type="button" class="btn btn-default projectTreeBtn" id="projectTreeBtn.add"><span class="glyphicon glyphicon-plus"></span> Hinzufügen</button>
<button type="button" class="btn btn-default projectTreeBtn" uib-dropdown-toggle><span class="caret"></span></button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="projectTreeBtn.add">
<li role="menuitem"></li>
<li role="menuitem"></li>
<li role="menuitem"></li>
<li role="menuitem"></li>
</ul>
</div>
I want the dropdown to be appended to the second button, but it always appears to be like this
This is my code :
<div class="btn-group" data-toggle="dis-rclick" data-target="#rightclickAlert">
<button type="button" class="btn btn-info">Translator</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="label-info" style="display: none">
Edit
</li>
<li class="label-danger">
Disable
</li>
</ul>
When I open the drop down list and click on any item i don't get any response.
For example: When I click on Edit I want to reload page but that doesn't work.
Whats wrong?
I have a lot of li elements that I want to either hide/show when clicking a filter button.
At the top of the page I have buttons using this:
<span id="filter">
<a class="btn btn-primary btn-xs active" id="showall">Show All</a>
<a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
<a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
<a class="btn btn-info btn-xs showSingle" target="3">Images</a>
<a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
<a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>
</span>
And then my li elements are like this:
<li id="li1" class="targetLi posts">
<li id="li2" class="targetLi videos">
<li id="li3" class="targetLi images">
<li id="li4" class="targetLi gifs">
<li id="li5" class="targetLi playlist">
<li id="li1" class="targetLi posts">
Notice that id="li1" is listed twice.
$(function(){
$('#showall').click(function(){
$('.targetLi').show("slow");
});
$('.showSingle').click(function(){
$('.targetLi').hide("slow");
$('#li'+$(this).attr('target')).show("slow");
});
});
What I want to do is show all elements with the same id when the filter button is pressed. I am not sure what I am missing. When I click the button to show only the Posts for example it will hide everything and show only 1 Post even though there are 2. Can someone help point me in the right direction?
Using multiple ids is going against convention. As a result you will find several pitfalls with this approach, including that only one of the ids can be queried. Please avoid that and use class names as they are intended to refer to sets of elements, while ids are meant to refer to individual elements.
However, that isn't the problem with the code shown. The problem is that you attempted to select elements based on a class instead of id - class is ., id is #.
I would suggest refactoring your design to better select these elements. This includes naming a parent ul element, and also caching some of the key elements. Shown below:
$(function(){
var parent = $('.targetUl'), list = $('li', parent);
$('#showall').click(function(){
list.show("slow");
});
$('.showSingle').click(function(){
var target = '.li'+$(this).attr('target');
list.not(target).hide("slow");
$(target,parent).show("slow");
});
});
#filter a {
border: inset 1.5px grey;
cursor: pointer;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="targetUl">
<li class="li1 posts">posts</li>
<li class="li2 videos">videos</li>
<li class="li3 images">images</li>
<li class="li4 gifs">gifs</li>
<li class="li5 playlist">playlist</li>
<li class="li1 posts">posts</li>
<ul>
<div>
<span id="filter">
<a class="btn btn-primary btn-xs active" id="showall">Show All</a>
<a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
<a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
<a class="btn btn-info btn-xs showSingle" target="3">Images</a>
<a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
<a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>
</span>
</div>
Changing the selector from #li1 to [id="li1"] should do the trick.
$(function(){
$('#showall').click(function(){
$('.targetLi').show("slow");
});
$('.showSingle').click(function(){
$('.targetLi').hide("slow");
$('[id=li'+$(this).attr('target')+']').show("slow");
});
});
try this
$(function(){
$('#showall').click(function(){
$('.targetLi').show("slow");
});
$('.showSingle').click(function()
{
$('.targetLi').hide("slow");
$('.li'+$(this).attr('target')).show("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<span id="filter">
<a class="btn btn-primary btn-xs active" id="showall">Show All</a>
<a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
<a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
<a class="btn btn-info btn-xs showSingle" target="3">Images</a>
<a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
<a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>
</span>
<ul>
<li class="targetLi posts li1">posts</li>
<li class="targetLi videos li2">videos</li>
<li class="targetLi images li3">images</li>
<li class="targetLi gifs li4">gifs</li>
<li class="targetLi playlist li5">playlist</li>
<li class="targetLi posts li1">posts</li>
</ul>
I am trying to implement a dropdown time selector using Bootstrap:
HTML
<div class="btn-group">
<a id="from-text" class="btn btn-default">From</a>
<a
data-target="#"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span
class="caret">
</span>
</a>
<ul id="from" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
<a id="to-text" class="btn btn-default">To</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
Javascript
$('#from li').on('click', function(){
$('#from-text').val($(this).text());
});
$('#to li').on('click', function(){
$('#to-text').val($(this).text());
});
I am trying to select the time and then update the dropdown value to represent that time. Using the above code, when I click the dropdown value, it does not indeed update the text. No errors were found in the console either.
Attach the event on <a> element.
JavaScript:
$('#from li a').on('click', function(){
$('#datebox').text($(this).text());
});
$('#to li a').on('click', function(){
$('#datebox').text($(this).text());
});
You can have two dropdowns in different .btn-group divs.
HTML:
<div class="btn-group">
<a id="from-text" class="btn btn-default">From</a>
<a
data-target="#"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span
class="caret">
</span>
</a>
<ul id="from" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
<div class="btn-group">
<a id="to-text" class="btn btn-default">To</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
If you want to replace the text inside an element, use text(newText).
$('#from-text').text($(this).text());
Missing the ID for the element in your HTML. Where ever you want to add the value for datebox give it an id="datebox"
but right now your code is going to update the same box value so you might want to change the id names so one is getting the value from "From" and the other to "TO"
If you want to entirely replace the text use the text() function rather than val().
$('#from li').on('click', function(){
$('#from-text').text("from " + $(this).text());
});
$('#to li').on('click', function(){
$('#to-text').text("to " + $(this).text());
});
I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>