I created a custom template for the AngularStrap Select directive but I am unable to type inside of the textbox that I have added to the template for some reason. I would like to use this textbox to filter the list items.
Custom HTML Template (/dist/select.html)
The only thing that I added here from the default template was another <li> element that includes the textbox. Said another way, I basically copy & pasted the default template and added the <li> and <input> elements.
<ul tabindex="-1" class="select dropdown-menu" ng-show="$isVisible()" role="select">
<li>
<input type="text" class="form-control input-sm" ng-model="iconFilter" />
</li>
<li ng-if="$showAllNoneButtons">
<div class="btn-group" style="margin-bottom: 5px; margin-left: 5px">
<button class="btn btn-default btn-xs" ng-click="$selectAll()">All</button>
<button class="btn btn-default btn-xs" ng-click="$selectNone()">None</button>
</div>
</li>
<li role="presentation" ng-repeat="match in $matches" ng-class="{active: $isActive($index)}">
<a style="cursor: default;" role="menuitem" tabindex="-1" ng-click="$select($index, $event)">
<i class="{{$iconCheckmark}} pull-right" ng-if="$isMultiple && $isActive($index)"></i>
<span ng-bind="match.label"></span>
</a>
</li>
</ul>
HTML
This is the actual HTML that includes the call to the bs-select directive.
<button ng-if="path() === '/contacts/people'"
type="button"
class="btn btn-default btn-sm"
ng-model="selectedIcon"
data-html="1"
data-multiple="1"
data-template="/dist/select.html"
ng-options="icon.value as icon.label for icon in getIcons()"
bs-select>
Action <span class="caret"></span>
</button>
Related
I have an HTML user interface that uses Bootstrap, and has a dropmenu as well as some input fields. What I want to be able to do is populate the input field with the value of the drop-menu selection. So far I haven't been able to bind to that value and have it show up in the input value field.
Here is my code:
<div id="create-job-pane">
<div class="container">
<h2>Create Job</h2>
<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button>
</li>
<li>
<button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button>
</li>
<li>
<button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button>
</li>
</ul>
</div>
</div>
<hr />
<!-- <p id="selection"></p> --> // Works if I populate it here
<div class="form-group">
<label>Job name</label>
<input type="text" class="job-name form-control"> // Bind value here
</div>
<div class="form-group">
<span class="btn btn-default btn-success" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
</div>
// ... other code
<script>
function populateJobVal(val) {
document.getElementById("selection").innerHTML = val;
}
</script>
I tried this:
<input type="text" class="job-name form-control" value="selection">
And this:
<input type="text" class="job-name form-control" id="selection">
... but it did not bind to the input field.
How can I get the value selected when my button is clicked to appear in the input text box?
Just swap the innerHTML to value and you're good to go.
function populateJobVal(val) {
console.log(val);
document.getElementById("selection").value = val;
}
<div id="create-job-pane">
<div class="container">
<h2>Create Job</h2>
<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button>
</li>
<li>
<button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button>
</li>
<li>
<button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button>
</li>
</ul>
</div>
</div>
<hr />
<div class="form-group">
<label>Job name</label>
<input type="text" class="job-name form-control" id="selection"> // Bind value here
</div>
<div class="form-group">
<span class="btn btn-default btn-success" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
</div>
I have a button called Update which I would like to be disabled until an option is selected from the drop-down menu.
So far I have the button disabled:
$('.btn-update').prop('disabled', true);
This is my markup for the buttons and drop-down menu:
<div class="col-md-12 tableContainer">
<div class="panel-heading import-song-panel text-center">
<div class="panel-title">
<ul class="list-inline">
<li class="pull-right">
<div class="dropdownContainer btn-group text-right">
<button type="button" class="btn btn-primary br2 btn-md fs12 dropdown-toggle table-btn" id="table-actionbtn" data-toggle="dropdown" aria-expanded="false">
Select Status
<span class="caret ml5"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
Accept & Send
Accept
Reject
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 text-right">
<div class="panel-heading import-song-panel text-right">
<input type="button" class="btn btn-primary" id="js_CancelForm" value="Cancel" />
<input type="submit" class="btn btn-success btn-update" id="js_SubmitForm" value="Update" />
</div>
</div>
Would anyone be able to show me how I can enable the button only when a status is selcted from the drop-down menu.
You can add a class to the dropdown options and add a click event as well.
like:
$('.optclick').click(function(){
$('.btn-update').prop('disabled', false);
e.preventDefault();
});
https://jsfiddle.net/Lz8sxmqm/10/
You can add an onclick event on options of dropdown.
Accept & Send
and call an function on click event
function enableButton(){
$('.btn-update').prop('disabled', false);
}
I have tries to position the items like:
so the markup after my change is here
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll col-4">
<button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#/">Home</a>
<a class="navbar-brand" href="#/report">Report</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="searchBox col-4" [collapse]="isCollapsed">
<form class="navbar-form search">
<div class="form-group">
<!--</typeahead>-->
<input [(ngModel)]="country"
[typeahead]="countries"
autocomplete="off"
(typeaheadOnSelect)="countrySelected($event)"
class="form-control searchInput" [ngModelOptions]="{standalone: true}"/>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedSearchType.name}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let type of searchType; let i = index;" role="menuitem">
<a (click)="onTypeChange(type)" class="dropdown-item cursor-pointer">{{type.name}}</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary" (click)="loadFromSheet()">
<span class="glyphicon glyphicon-paste"></span>
Load from sheet
</button>
</div>
</div>
</div>
But it seems like this:
How can I fix this so the "load" button is to the right most?
You can try changing the col-md-4 to col-md-3 or less and manipulate the spacing between the buttons with margin-left property on the Load button. You are probably pushing the button to the next row, so check the paddings and margins on the CSS properties surrounding the other elements if not finding success.
Hope this helps.
My code below submit's perfectly as i want but the Add & Create new item in the bootstrap dropdown i need to be a submit, i've tried with javascript but then the html5 validation dosen't trigger. Is my only option to try and style the submit button like the bootstrap dropdown-item ?
$('btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
HTML
<form id="WorkOrderFrm" name="WorkOrderFrm" action="/proc/WorkOrderFrm.php" method="post" autocomplete="off">
<div class="btn-group">
<div class="btn-group">
<button type="submit" id="BtnAdd" class="btn btn-custom btn-sm" name="btnWorkorder_Add">Add</button>
<button type="button" class="btn btn-custom btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" name="btnWorkorder_Add_Create" id="btnWorkorder_Add_Create">Add & Create New</a>
</div>
</div>
Why are you needing a dropdown if there is only one option?? Why not just use <input type='submit' value='Add And Create New' />
you are missing '#' tag. try this code and let me know if it is still not working
$('#btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
I have following code for search bar where there is a Drop down list which I have developed on button and a text field to type search query.
On button click I am retrieving text using
document.getElementById('').value;
But how can fetch selected text of drop down button?
My code :
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
It looks like you're using Bootstrap. Bootstrap components often require jQuery. Use jQuery to bind a click handler to each of the dropdown items you want to retrieve a value from, in this case the <a> tags.
You can store that value in a variable and retrieve it when the search button is click.
(function(window, document, $, undefined) {
var dropdownValue;
/* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */
$('.dropdown-menu a').each(function(i, item) {
/* Add click handler to each one, whenever one is clicked the
dropdownValue variable is updated with it's value */
$(this).on('click', function(e) {
dropdownValue = this.innerText;
});
});
/* Retrieve dropdown value */
$('#apply').on('click', function(e) {
alert(dropdownValue);
});
}(window, window.document, jQuery));
<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="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches
</li>
<li>Ties
</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Another way would be to apply a class to the selected <a> tag and query for that when the search button is clicked so you don't have to create a variable and update it.