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?

Change the text of a span element on click on an anchor element

<div class="input-group-btn search-panel" id="change-text">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept change-text-span">Select Location</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>
Odisha
</li>
</ul>
</div>
In the above code, I need to change the text of the span element on click of the a element. How can I do this?
Please Help.

Try this:
$("#change-text-a").click(function() {
$(".caret").text("SEt content here");
});

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

Activate Dropdown Toggle on Default button

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>

Bootstrap data-toggle="button" on non-button element

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>