Issue On Adding Slide Function on Bootstrap 3 Button Dropdown - javascript

Can you please take a look at This Demo and let me know why I am not able to add slide function to the Bootstrap 3 button dropdown?
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<script>
$('.dropdown-toggle').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown-toggle').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
</script>
Thanks


All dropdown events are fired at the .dropdown-menu's parent element. link
You need to use
$('.btn-group').on('show.bs.dropdown', function() { ... });
See this fiddle.


Working Example
http://jsfiddle.net/br0jkp1u/6/
$('#example').on('click', function () {
$('ul.dropdown-menu').slideToggle();
});
<button id="example" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">


Check in updated fiddle:http://jsfiddle.net/br0jkp1u/7/
[Fiddle][1]

Related

link not work in Bootstrap dropdown button

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?

Updating dropdown value

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());
});

.click event (jQuery) for <li> element in dropdown menu (Bootstrap)

I'm using Bootstrap and I've the following drop down menu:
<span class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Toggle</button>
<ul class="dropdown-menu" role="menu">
<li id="one">One</li>
<li id="two">Two</li>
</ul>
</span>
I would like to use the .click event of jQuery to check if the first item is being clicked:
$(function () {
$("#one").click(function() {
alert("Alert!");
});
});
Unfortunately that's not working.
When the list item is NOT in the dropdown menu it works perfectly.
Thanks for any support in advance!

Just Copy and Check, its Working..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#one").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<span class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Toggle</button>
<ul class="dropdown-menu" role="menu">
<li id="one">One</li>
<li id="two">Two</li>
</ul>
</span>
</body>
</html>
DEMO

bootstrap drop down button aligns on the wrong side

When you click on the dropdown ul, the list items (<li>) are shown all the way to the left..
As you can see in my simplified jfiddle example:
http://jsfiddle.net/3bfvvkbh/
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="d``ropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$(function() {
var append = function( txt ) {
$("#yearlist").append( '<li>' + txt + '</li>' );
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});

The dropdown has be in a seperate btn-group.
See my updated fiddle and also the Bootstrap Docs - #Nested Button groups
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
</div>

Add this Class dropdown-menu-right in the UL tag, class="dropdown-menu dropdown-menu-right", Demo
<ul id="yearlist" class="dropdown-menu dropdown-menu-right" role="menu">
<li> <a>2010</a>
</li>
</ul>

Instead of using the button tag like you're using in the example rather use a div with a .btn-group class.
<div class="btn-group">
Dropdown
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
http://jsfiddle.net/3bfvvkbh/2/

Everything else is perfect but you just missed to take one extra btn-group to bind button and toggling menu
See: http://jsfiddle.net/3bfvvkbh/6/
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});

How can i add or append more then one dropdown [duplicate]

This question already has an answer here:
add previous functionality when click on add button(parent child concept in jquery) [closed]
(1 answer)
Closed 9 years ago.
My task is to add previous form when i click on add button.
When i click on Add button it will add all dropdown below each as shown in image.
And remove one line(means all 5 dropdown of one line).I am to do this functionality.
problem is:
how we can append or add one line each click on add button.
my coading is:
jQuery:
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
Html:
<div class="form-group">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>

Try using .clone() from jQuery lib and simply clone last element.
Clone manual here
EDIT:
The answer to this problem is in comments bellow ( jQuery on() function)

thank you I did this:
coading is:
$("#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
Refered link:
Cloning whole form elements after clicking button

Categories

Resources