simple (and probably easy) my code is as follows
<div class="btn-group mod-group">
<button type="button" class="btn btn-default">Moderálás</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-toggle="button" class="publicBtn<?php echo ($s['public'] ? ' active' : '');?>"><a><i class="icon-eye-open"></i> Publikus</a></li>
</ul>
</div>
My question is how can I make the li with the data-toggle="button" work as a button would with a data-toggle="button" so how can I ask bootstrap to remove and add the active class to that li when clicked?
Also the question is not how to do this in js as It would be much nicer to accomplish this purely using the bootstrap api.
You just need to assign a role to the <li> element and then the data-toggle
DEMO http://jsfiddle.net/kevinPHPkevin/6KffS/108/
<ul>
<li role="button" class="btn" data-toggle="button">Button1</li>
</ul>
Related
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?
Been having some issues getting a Bootstrap button dropdown to toggle (making the list items and dropdown ul element visible) when another button is clicked. Here's what I have so far which doesn't seem to work (v3.3.7). I want the "testing" button to additionally toggle the "test" button dropdown.
<div class="btn-group">
<a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</a>
<ul id="test-dropdown" class="dropdown-menu">
<li>test</li>
</ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').dropdown('toggle')">testing</a>
You can use the custom attribute data-target to target the button group, so clicking on any element outside will trigger the dropping-down on the targeted button group.
<a id="test-btn" class="btn btn-default" data-toggle="dropdown" data-target=".btn-group">
testing</a>
You should give your button group an id, so that the data-target is more specific.
Demo
Try .toggle('dropdown') instead of .dropdown('toggle'):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</a>
<ul id="test-dropdown" class="dropdown-menu">
<li>test</li>
</ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').toggle('dropdown')">testing</a>
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 was trying to activate dropdown toggle button on the click of default button but by doing debigging i get to know that dropdown comes but it then disappears.
I am unable to recollect why is it happening?
I have put my code on http://jsfiddle.net/9r14uuLw/31/
<div class="row">
<div class="col-sm-4">
<!-- Button Group -->
<label><h5>Status</h5></label>
<div class="btn-group btn-group" >
<button type="button" class="btn btn-default" id = 'StatusBtn' onclick="clicktogglebutton()" >Select One</button>
<button type="button" class="btn btn-default dropdown-toggle" id = 'togglebtn1' data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Status 1</li>
<li>Status 2</li>
<li>Status 3</li>
</ul>
</div>
</div>
</div>
Please do loo at it and let me know , what may be the possible tweak i need in the code to make it work.
It would be preferable to use a standard <select> element for this role, as it's better both functionally and semantically.
However, if you're set on rolling your own, why have two buttons? Try condensing it to a single element:
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select One
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
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);
});