Trigger dropdown using javascript - javascript

I am using a bootstrap dropdown and I want to trigger it with some other button.
<li class="dropdown">
Insert TA<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form class="navbar-form navbar-left" >
<div class="form-group" id = "TAform">
<input type="text" class="form-control" placeholder = "Roll Number" required>
<input type="text" class="form-control" placeholder = "M.A.C address" required>
</div>
<button type="submit" class="btn btn-default" onClick = "addMAC()" >+</button>
<button type="submit" class="btn btn-default" onClick = "removeMAC()" >-</button>
<button type="submit" class="btn btn-default" onClick = "submitForm()">Submit</button>
</form>
</ul>
</li>
I want this to be triggered (open) when I click on this other button:
<button type = "submit" class="btn btn-default" onClick = "deleteTA()">delete</button>
ie what should be I put inside the deleteTA() function.

In your case you need to toggle dropdown this way:
function deleteTA(e) {
$('.dropdown-toggle').dropdown().dropdown('toggle');
e.stopPropagation();
}
Where you pass event object into function:
<button type="submit" onClick="deleteTA(event)" class="btn btn-default">delete</button>
It's important here that you stop event propagation otherwise dropdown will immediately close.
Demo: http://plnkr.co/edit/TfdnoGdW1CMpbZlHl62A?p=preview

In the bootstrap documentation on dropdown (with interactive examples enabled) it is given in "Usage" section as:
$('.dropdown-toggle').dropdown()
Hope that helps.

Related

CSS: Depress Dropdown grouped with Radio Buttons

I'm using bootstrap to style a group of radio buttons that also include a dropdown.
When the user selects an option from the dropdown OTHER is not included as one of the radio buttons, so it looks like the last depressed radio button has been chosen when really C | D | E has been.
Is it possible to include the OTHER dropdown as one of the radio buttons so it looks depressed when the user selected C,D,E?
Codepen here if helpful: https://codepen.io/mayagans/pen/qBdaZEJ
$( document ).ready(function() {
$("input[name='test']").change(function(){
$("#results").text($("input[name='test']:checked").val());
});
});
$(".dropdownitems").click(function () {
var value = $(this).attr("href");
document.getElementById("results").innerHTML = value
});
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testA" autocomplete="off" value="A">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testB" autocomplete="off" value="B">B
</label>
<div class="btn-group">
<label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="test" id="OTHER" autocomplete="off">OTHER<span class="caret"></span>
</label>
<ul class="dropdown-menu">
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</div>
<div id="results"></div>
I don't think that radio buttons are the good solution for this. You could just use "simple" buttons. Anyway, with bootstrap, you could add "active" to the button ( or radio button) class so that it will be shown as if it was pressed.
With single button
Pressed
<button type="button" class="btn btn-primary active">Click Me!</button>
Normal
<button type="button" class="btn btn-primary">Click Me!</button>
With your radio button it's the same
Pressed
<label class='btn btn-primary active'>
<input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
</label>
Normal
<label class='btn btn-primary'>
<input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
</label>
Example
<script>
$(document).ready(function () {
let pressedId
let buttonsId = ["a", "b"] // List of the buttons which are always visible
let dropDownsButtonId = ["c", "d", "e"] //List of the buttons of the dropdown
$("button").click(function () {
if (buttonsId.includes(this.id)) { //First "if" for "always visible" button
changeClass(this.id)
} else if (dropDownsButtonId.includes(this.id)) {//Second if for the button of the dropdown
changeClass("dropDownMenuButton")
}
})
function changeClass(id) {
if (pressedId !== undefined)
document.getElementById(pressedId).className = document.getElementById(pressedId).className.replace(" active", "")
document.getElementById(id).className += " active"
pressedId = id
}
})
</script>
<button type="button" class="btn btn-primary" id="a">a</button>
<button type="button" class="btn btn-primary" id="b">b</button>
<div class="dropdown">
<div class='btn-group'>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropDownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<ul class='dropdown-menu'>
<li>
<button type="button" class="btn btn-primary" id="c">c</button>
</li>
<li>
<button type="button" class="btn btn-primary" id="d">d</button>
</li>
<li>
<button type="button" class="btn btn-primary" id="e">e</button>
</li>
</ul>
</div>
</div>

Unable to fetch values from an input element in Bootstrap's popover

I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code

trying to make a value true on click with an if statement

I am trying to change between colors on click in jquery. According to the picture below I have the default value
and then in this image when I click on the input box and then back on a button the background color stays on the input box rather than dissappears when any other button is clicked.
i'd like the background color to disappear when any of the buttons are clicked.
here is my jquery:
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
else{
$(this).removeAttr("background-color")
$("#default").addClass('active');
}
});
and here is my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
any help would be appreciated!
Try
$(this).css("background-color", "")
Instead of this
$(this).removeAttr("background-color")
You cannot remove the background-color like this as it is not an attribute.
On click of button you should remove the class active from the donation-amount
what you have written will only work as toggle on the custom button only. Its not interacting with rest of the buttons.
Flow should be to remove class from custom button if any button is hit and if custom button is hit remove class from any of button.
$(".selectvalue").each(function(){
$(this).click(function(){
$("#donation-amount").removeClass('active');
})
});
$("#donation").click(function(){
$(".selectvalue").removeClass('active');
})
Is this the functionality you are looking for? Also added in fiddle
Instead of background color, just use the .active class
$('#donation-amount,#default, #btn2, #btn3').click(function(event) {
//add any other checks you want here
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
$("#donation-amount").removeClass('active');
$(event.target).addClass('active');
});
.active{
background-color:#c97e06;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
I thought this code satisfied your requirement.
if your problem is not solve then write comment in explain then I can do it.
Please vote for me.
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
console.log("hello");
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
});
$("body").on("click","#default,#btn2, #btn3",function(){
//console.log($(this));
$("#donation-amount").css("background-color","rgb(255,255,255)");
//$("#default").addClass('active');
}
This seems a bit complicated the way you have it. This is a classic "choice highlight" scenario and is easily handled with a simple $(this).addClass('active').siblings().removeClass('active'); to set and remove the active highlight.
I also took the liberty of making the assumption you want some CUSTOM amount so I added a simple input for that to use with the CUSTOM button. I also simplified the custom button by using the data attribute and removed the code from that as frankly it seemed weird to have in there.
HTML with some adjustments:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button>
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
<div class="container">Custom Amount
<input id="customamount" type="text" value="67" />
</div>
Code that sets the color using an active class and sets the custom amount in the hidden field (or default if it has none)
$(".choice").on('click', function() {
if ($(this).is("#donation-amount")) {
var mydefault = $(this).data("defaultvalue");
// use custom amount if it has one, otherwise use this custom default
this.value = $('#customamount').val() || mydefault;
}
$(this).addClass('active').siblings().removeClass('active');
$('#donation-amount-value').val(this.value);
$('#display-amount').text('$'+this.value);
});
CSS:
.active {
background-color: #c97e06;
}
You can play around with it here: https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/

javascript function not recognized inside bootstrap dropdown button

I'm trying to build a Bootstrap button dropdown list, where each element in the list calls a function and pass its id into it. My js functions are defined in an object called Search, which is instantiated on page load. Here's my setup.
<div class="input-group">
<div class="input-group-btn" role="group">
<button type="button" id='filelist' class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick='search.print()'>
List Of <span class="caret"></span></button>
<ul class="dropdown-menu" id='filelist_ul' role="menu" >
<li><a id='var1' onclick='search.print(var1)'>Var1</a></li>
<li><a id='var2' onclick='search.print(var2)'>Var2</a></li>
</ul>
</div>
<input type='text' class='form-control' id='uploadtype_text' readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" name='filelist'>
</span>
</span>
<input type="text" class="form-control" readonly>
<div class='input-group-btn'>
<input type="submit" name="uploadfile_form" value="Submit" class="btn btn-danger"/>
<button type='button' name='clear' class='btn btn-success' onclick='search.clearResults()'>Clear</button>
</div>
</div>
search.print() gets called correctly when I attach it to the main "List Of" button, however, when I click any of the li elements, I'm getting the error
search.print is not a function
I've gotten this working before in other cases, but for some reason this is breaking, and I can't figure it out. I seems like a syntax error or something I'm missing. The variable search doesn't look like it's getting overridden either. I don't get it.
Here's a fiddle
https://jsfiddle.net/rnxx4rnc/
You need to bind search to the window object.
$(function() {
window.search = new Search();
});

angular bootstrap modal opening on the enter click

In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>

Categories