Develop Reference

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?

Hide/Show multiple li content with same id

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>

dropdown with form fields bootstrap 3

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>

How to display text of selected List item on dropDown?

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

.clone() and .remove() method in jquery

My task is to achive the functionality, when I click on a button, then it add a full row, which is achived by me by .clone() method. Now I want to delete this. When I click on cross button, then only remove that line. As shown in image:
When I click on cross, then remove that line. My code is:
$(document).ready(function () {
$("button#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".glyphicon-remove").click(function () {
$(".abcd:last").remove();
});
});
html:
<div class="wrapper">
<div class="form-group abcd" id="abcde">
<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>
</div>
</form>
<button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button>
<button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button>
I am able to add New line by click on add button, but unable to hide that line by click on cross.
Note: remove only that line, which line cross button is selected.

First, you'll need to change your clone to that :
$(".abcd:last").clone(true).appendTo(".wrapper");
Passing true mean that it is cloning events as well.
Then, in your remove function, you'll need to use this keyword. this will be the button clicked. You can then use DOM traversal method like closest to remove your row :
$(".glyphicon-remove").click(function () {
$(this).closest(".abcd").remove();
});

Alternatively, you can bind the event to the container like this:
$(document).ready(function () {
$("button#add").click(function () {
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".wrapper").on('click', '.glyphicon-remove', function () {
$(".abcd:last").remove();
});
})