Show dropdown menu using external control - javascript

How do I make a Bootstrap dropdown appear when an ajacent button is pressed?
I have tried every combination of:
$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle');
$('#branchToggle').parent().addClass('open')
$('#branchToggle').next().show()
But I can't get it to work.
My html is:
<div class="btn-group">
<button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button>
<button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="branchFilter" class="dropdown-menu" role="menu">
<?PHP foreach ($branchList as $branchData) { ?>
<li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><?PHP echo $branchData->name;?></li>
<?PHP } ?>
</ul>
</div>
To clarify, I want the list to show if the "Branch" button is pressed, just like it would if I clicked the normal trigger button.

If you want the drop-down to open only on click of the "Branch" button, do something like this
$('#activeBranchFilterBtn').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
If you would like to get the drop-down when clicked anywhere on the complete block(either of the buttons), do this
$('.btn-group').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
I guess the second one is what you need.
UPDATE: class="open" will be toggled on your .btn-group when a dropdown trigger is given from the button with data-toggle="dropdown" attribute. just add this attribute to the first button(Branch) and you will be good to go. Check this fiddle. Hope this helps.

Related

Making a dropdown button turn (and stay) green in JavaScript

So, I'm new to coding, and I have been struggling to make a dropdown button turn green when you click the main button "Pronto". I've followed some steps from similar questions here, but they didn't work for me. No effects at all. Can you give me some insights?
HTML:
<div class="btn-group">
<button class="btn btn-default">Pronto</button>
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" role="menu" style="">
<a class="dropdown-item" href="#">Pronto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item Não Disponível</a>
</div>
JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
keyboard: false
})
registerAccountButton.addEventListener('click', function () {
registerAccountModal.toggle();
})
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
CSS:
.green {
background-color: greenyellow;
}
You can even see I tried creating a class and calling it, but didn't work.
What am I missing?
Your problem is the following code
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
You have created your buttons using the <button> in html, but in js you are referencing them using <input type="button"> which is not present & hence is ignored by jQuery.
Your code should be something like follows, to make the dropdown button green, when the Pronto button is clicked:
$('#prontoButton').on('click', function(evt) {
$('.dropdownButton').addClass('green');
});

sorting bootstrap modal-body elements in Javascript/Jquery when the page loads

I am working on the fiddle in which I want to sort multiple rows (Row1 having def and Assign a Computer Section, Row2 having abc and Assign a Computer Section, etc) coming from Bootstrap Modal.
At this moment, the rows are not sorted in the modal. The HTML/Bootstrap code which I have used in order to create the modal is :
<div class="row-computerlabel form-group clearfix">
<div class="editcomputerlabel col-sm-5">abc</div>
<div class="assigncomputerlabel col-sm-5">
<div class="btn-group bootstrap-select show-tick computerlabelscomputerselector">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Assign a computer"><span class="filter-option pull-left">Assign a computer</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu"></ul>
</div>
<select class="computerlabelscomputerselector selectpicker" multiple="" title="Assign a computer" tabindex="-98"></select>
</div>
</div>
<div class="deletecomputerlabel col-sm-2"><button class="btn btn-link btn-delete" data-task="deletelabel" title="Delete group" type="button"><i class="fa fa-trash-o"></i></button></div>
</div>
Problem Statement:
I am wondering what plain Javascript or Jquery code I need to add above so that all the contents in the Bootstrap Modal get sorted meaning abc, def, jkl text should show up first with their assigned computers in the fiddle when the page loads.
You could use the sort function of JavaScript.
jQuery
$(document).ready(function(){
var rowComputer = $('.row-computerlabel');
rowComputer.sort(function(a,b){
var label1 = $(a).children('.editcomputerlabel').text();
var label2 = $(b).children('.editcomputerlabel').text();
return label1 >= label2;
});
rowComputer.appendTo('#computerlabeltable');
});
This piece of code is really simple. You have in the rowComputer variable all your rows.
You apply the sort function on your array and you need to specify the condition of your sorting (here it needs to be sorted alphabetically).
Finally, you append your array containing your rows in the div englobing all yours rows.
jsFiddle
Here is a jFiddle link : http://jsfiddle.net/Lqam4g2u/

Change glyphicon with class.onclick

I'm wondering how I can change bootstrap glyphicon when I click over my HTML button.
This is my button :
<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
aria-expanded="false" aria-controls="title">
<span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>
And this is my JavaScript part :
<script>
$(document).ready(function () {
$('.button-choice').click(function () {
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
});
</script>
I don't overcome to click on button and change glyphicon inside.
First, you have a typo (.button-choice instead of .btn-choice).
Then, you need to find the closest span and update it, otherwise the class will be applied to the button instead of the inner span, and won't work as intended.
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
aria-expanded="false" aria-controls="title">
<span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>
js:
$('.btn-choice').click(function () {
$(this).find('span').toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
//^----------^---- Note this! otherwise it won't work, since it would target $(this), which is the button.
});
Your fiddle, updated: https://jsfiddle.net/6ae0c1dL/2/
Your code seems to be the right way to make it. However, you are listening the click event on the wrong class :
$(".button-choice")
Instead of
$(".btn-choice")
EDIT :
You should also find your span into your button. One more thing, you can toggle multiple classes with one toggleClass() call :
$(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
I'd use an id to get the span containing the glyphicon. That id being unique in the page, this solution works only for 1 button. A workaround to this can be using some data-something to call the correct span.
Plus, you aren't calling the correct class for the button.
$(document).ready(function () {
$('.btn-choice').click(function () {
let spanId = $(this).data("spanid");
$('#' + spanId).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button data-spanid="theGlyphicon1" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title">
<span id="theGlyphicon1" class="glyphicon glyphicon-chevron-down"></span>my button 1
</button>
<button data-spanid="theGlyphicon2" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title">
<span id="theGlyphicon2" class="glyphicon glyphicon-chevron-down"></span>my button 2
</button>

How to change button in twitter bootstrap using jquery

I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers
You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");
In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");

(Bootstrap 3.1.1) popover on show reset my addClass?

<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(
What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}
Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>
ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>‌​" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red

Categories