I have a Bootstrap Button group that used a split button dropdown. What I want to do is when you select an option from the dropdown, the text, href and icon will change on the button. I can get the text to change just fine, but I'm getting stuck with changing the HREF attribute and the icon.
HTML
<div class="btn-group">
<span class="standard">Search</span><span class="mobile"><i class="fa fa-search"></i></span>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Search</li>
<li>Song Search</li>
<li>Advanced Search</li>
</ul>
</div>
JAVASCRIPT
$(".dropdown-menu li a").click(function(){
$(this).parents(".btn-group").find('a.btn').html($(this).text());
$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
$(this).parents(".btn-group").find('a.btn i').removeClass();
$(this).parents(".btn-group").find('a.btn i').addClass($(this).data('icon'));
});
I'm want to use the data-values, because in the long run, this dropdown will be dynamic, the list will depend on which page it appears on.
ok... apparently everything is correct EXCEPT the href portion.
instead of
$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
use
$(this).parents(".btn-group").find('a.btn').attr('href', $(this).data('value'));
I have a couple console.logs displaying the results of the change, and it's all working perfectly.
HREF
Your href doesn't change because
.attr('href') = $(this).data('value');
Is not the way to change an attribute. It should be:
.attr('href', $(this).data('value'));
ICON
The icon change doesn't work because
$(this).parents(".btn-group").find('a.btn').html($(this).text());
Removes the entire content from the a.btn, which includes the <span> which contains the <i> that contains the icon. Basically, this line also removes the <span class="mobile"><i class="fa fa-search"></i></span>, so there is nothing left to removeClass or appendClass to :-D!
Here is your working code: https://jsfiddle.net/DTcHh/16689/
Happy coding!
Try this code.
$(".dropdown-menu li a").on("click",function(){
var icon = $(this).attr('data-icon');
var html = $(this).html();
$(this).parents(".btn-group").find('a.btn').html('<i class="'+icon+'"></i>'+html);
$(this).parents(".btn-group").find('a.btn').attr('href', $(this).attr('data-value'));
});
You can do something like:
document.getElementById('elementid').className = 'classname'
or a string replace:
document.getElementById('elementid').className
= document.getElementById('elementid').className.replace(your replace code)
Related
<div class="dropdown" style="position:fixed">
<span class="icon dropdown-toggle" data-toggle="dropdown"></span>
</div>
<ul class="dropdown-menu" style="position:abosolute">
<li id="1"></li>
<li id="2"></li>
</ul>
I need to do something like this. That is icon in one div(fixed) and ul outside the div(absolute position) to make scrollable in page ? If I give within the same div both taking fixed position and dropdown becomes un-scrollable This is not working. How can I achieve this ?
I think the only way to get this working is by creating a Button linked with your Dropdown menu. Almost like in this Bootstrap Example.
I have a page with multiple dropdowns like this:
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Item I</a></li>
<li><a tabindex="-1" href="#">Item II</a></li>
<li><a tabindex="-1" href="#">Item III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>
I want to change the button text to selected element value. I've found this thread: How to Display Selected Item in Bootstrap Button Dropdown Title, which explains how to retrieve the text/value of selected item and change the text of the button, but there's a problem when there's more drop down menus on the page, the below script changes labels for all buttons present on the page:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
How to modify it so that it would only change the corresponding dropdown menu button?
As a side question: is there really no simple way of having <select> like behavior with dropdown menus out of the box in bootstrap?
You need to add specificity to your jQuery selector. Currently, you're selecting all elements with a .btn class that are the first child of their parent. What you want to do instead is get the current element's parent .btn-group then find the .btn:first-child inside of that. You can do that as follows:
$(function(){
$(".dropdown-menu li a").click(function(){
$(this).closest('.btn-group').find(".btn:first-child").text($(this).text());
$(this).closest('.btn-group').find(".btn:first-child").val($(this).text());
});
});
One of many potential solutions, transverse up the DOM to find the group it's in, and then target the button within the group.
$(function(){
$(".dropdown-menu li a").click(function(){
var target = $(this).closest('.btn-group').find('.btn:first-child')
target.text($(this).text());
target.val($(this).text());
});
});
My page is scrolling every time I update part of my model that is bound to my view. I think when the view updates, the page scrolls. How do I eliminate this behavior?
Here is an example of a drop down. Every time an item on the dropdown is selected, I update the model. Then, the page scrolls:
<div class="header_item btn-group" dropdown is-open="dd8.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
<span>{{a.Summaries[a.summaryIdShown].AgeSpecified}}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu accordion_item" role="menu">
<li>Adult</li>
<li>Pediatric</li>
<li>Both</li>
</ul>
</div>
Thanks in advance.
This is what makes the page scrolling: href="#" . The pawn symbol in href attribute means: scroll to the top. To fix that, just set to href="javascript:void(0)".
In Angular, href="#" does not prevent the default click action because is a directive which is what is causing the reload for you <a href=''..> should solve your problem. The docs for the anchor tag directive can be found here
I have a twitter bootsrap dropdown ,
<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....
My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.
Clicking on showpopup function should not open drop-down.
Is there any way to achieve this .
Please suggest
You can try to stop propagation after your ng-click function being executed.
Like this:
<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span>
This prevents the event from being propagated to the outer DOM elements.
So i'm trying to make a jquery dropdown that adds and removes classes. It does work, but only once. If i try the dropdown again, it simply drops down and slides up right after. It's suppose to drop down after clicking a button and slide up after another click.
$(document).ready(function() {
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});
});
The "btn-hover" class is meant to add the same css as it where in a hover state once the button is clicked.
--edit--
<div class="menu">
<div class="col-lg-12">
<button type="button" class="menuDrop btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="nav">
<li><a class="link" href="#">home</a></li>
<hr>
<li>portfolio</li>
</ul>
</div>
</div>
Using slideToggle and toggleClass should help you achieve this, and with less code:
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideToggle("slow");
$(".menuDrop").toggleClass("btn-hover");
});
Here's a fiddle: http://jsfiddle.net/scesR/
Hope that helps!
Bind it using change event, instead of click event.
$(".menuDrop").change(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});