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();
});
Related
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
I have the following likert scale:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled style="width:10px">Not<br />Fearsome</a>
<button id="fear1" type="button" name="gender" class="btn btn-default likert-1" val="0">1</button>
<button id="fear2" type="button" name="gender" class="btn btn-default likert-2" val="1">2</button>
<button id="fear3" type="button" name="gender" class="btn btn-default likert-3" val="2">3</button>
<button id="fear4" type="button" name="gender" class="btn btn-default likert-4" val="3">4</button>
<button id="fear5" type="button" name="gender" class="btn btn-default likert-5" val="4">5</button>
<a class="btn btn-link disabled" disabled style="width:10px">Extremely<br />Fearsome</a>
</div>
</div>
I am trying to access the 'val' attribute from a script by using:
$('#fear').val($(this).getAttribute('val'));
but this does not seem to work.
Note: #fear is the id of a hidden variable
getAttribute is a standard DOM method but you are trying to call it on a jQuery object.
Either use a standard DOM object:
this.getAttribute('val')
or use the jQuery attr method:
$(this).attr('val')
Note that val is not a valid attribute for the button element. Consider data-val instead.
Alternative, avoid adding an extra attribute with redundant information in the first place.
$(this).text();
none of the element has id "fear", check u have named them like fear1, fear2, fear3 ....
try
$(this).attr('val');
Try this: $('#fear').attr('val');
As suggested by #DimalChandrasiri, use
$(this).attr('val') or $('#fear').attr('val')
I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?
$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/
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>
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.