Hey all I am trying to get the previous button so that I can change its text to something else once someone selects a value from a select box.
<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">Type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dd1" role="menu">
<li>For Sale</li>
<li>Wanted</li>
</ul>
</div>
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Location</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dd2" role="menu">
<li>Somewhere</li>
<li>Elsewhere</li>
</ul>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
</div>
$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
$(this).prev().find('#search_concept').text($(this).text());
});
So the click event starts from THIS which is the a href="#" data-info="blah1">[value here]< /a> tag. So I am trying to go back to the < button> tag so that I can change the text Type to whatever was selected.
I've tried:
$(this).prev().find('#search_concept').text($(this).text());
and
$(this).prev().prev().find('#search_concept').text($(this).text());
and
$(this).prev().prev().children().find('#search_concept').text($(this).text());
and
$(this).prev().children().find('#search_concept').text($(this).text());
And I can't seem to find it....
fixed
$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
$(this).parents('.search-panel').find('button').html($(this).text() + ' <span class="caret"></span>');
});
The following snippet uses jQuery's .parents to locate a button.
$(this).parents(selector) will find any parent elements that have the specified selector.
Then .find(selector) will search that parent element for the specified selector.
Then you can assign that to a variable and use the element.
$('.search-panel #dd1').find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
var text = $(this).text();
// Assign element to variable for later manipulation
var $button = $(this).parents('.search-panel').find('button');
// eg: Replace button text (replaces all content including html)
// $button.text(text)
// eg: Find another element inside $button and replace the text
// $button.find('#search_concept').text(text)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">Type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dd1" role="menu">
<li>For Sale</li>
<li>Wanted</li>
</ul>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
</div>
You simply can't have multiple SAME ids.
$(this).parents().find("button #search_concept").text($(this).text());
You have duplicated ids which can make things messy. I would change concept of relaying on id to some other selectors, e.g classes:
And so such way you can treat search-panel group as a widget, and javascript going to be rewritten as:
$('.search-panel').each(function() {
var search_concept = $(this).find(".search_concept");
$(this).find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
search_concept.text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="search_concept">Type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" class="dd" role="menu">
<li>For Sale</li>
<li>Wanted</li>
</ul>
</div>
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="search_concept">Location</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" class="dd" role="menu">
<li>Somewhere</li>
<li>Elsewhere</li>
</ul>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
</div>
This approach will arguably improve portability.
Related
I have number of filters to show products in my shop. I'm using bootstrap-select to style the filter (dropdowns).
When I change a filter value, the other filters automatically hide options if there are no results available for that combination.
The problem is, that there a re now Filters that show that don't have any available options to choose from. In this case I want to hide the Filter completely.
If there are options available the code looks like this:
<div class="form-group ">
<label>Serie</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-serie" title="Bitte wählen..." aria-expanded="true">
<span class="filter-option pull-left">Bitte wählen...</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true">
<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">D-9</span><span class="fontawesome fa fa-check check-mark"></span></a></li>
</ul>
</div>
<label class="custom-select">
<select id="wpv_control_select_wpcf-serie" name="wpv-wpcf-serie[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
<option value="D-9">D-9</option>
</select>
<span></span>
</label>
</div>
</div>
If there is no option available, the code looks like this:
<div class="form-group">
<label>Passend für Helm</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true">
<span class="filter-option pull-left">Bitte wählen...</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
</div>
<label class="custom-select">
<select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
</select>
<span></span>
</label>
</div>
</div>
My goal is to add a class .hide-filter to .form-group if the child .dropdown-menu has no li
try below code where you can iterate each form-group and find if it contains dropdown with no li.
$(function(){
$('.form-group').each(function(){
var $dropdown = $(this).find('.dropdown-menu');
if($dropdown.find('li').length==0) {
$(this).addClass('hide-filter');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Passend für Helm</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true"><span class="filter-option pull-left">Bitte wählen...</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div
class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
</div><label class="custom-select"><select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98"></select><span></span></label></div>
</div>
This is another approach:
$( document ).ready(function() {
if($( ".dropdown-menu.inner:has(li)" ).length == 0){
$( ".form-group" ).addClass( "hide-filter" );
}
});
I want to send a text to a textbox on that "Text 1" Click
Here is my code:
HTML:
<td ng-show="table.similarParts">
<input ng-hide="item.is_new == false" type="text" class="form-control" uib-tooltip="You Can Filter Different Part Also" uib-tooltip-trigger="focus" uib-tooltip-placement="top"/>
</td>
<td class="wd-80" ng-show="table.similarParts">
<div class="btn-group" uib-dropdown="dropdown" ng-hide="item.is_new == false">
<button class="btn btn-default" type="button" data-keyboard="false" data-backdrop="static" uib-tooltip="Search This Part From Available Parts"" uib-tooltip-trigger="focus" uib-tooltip-placement="top"> <em class="fa fa-search"></em></button>
<button class="btn dropdown-toggle btn-default" type="button" uib-dropdown-toggle="">
<span class="caret"></span>
<span class="sr-only">default</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Text 1</a>
</li>
<li>
<a>Text 2</a>
</li>
</ul>
</div>
</td>
And Here is the Output:
I want to send this Text 1 to a TextBox Input on that "Text 1" Click ("Button is that magnifier glass")
You can use something like this :
Bind both select and input to the same ngModel:
Note: Given the logic here. CSS and other dropdown related changes i didn't make.
In controller:
On click of li ,the text value will be displayed in input text box.
angular.module('app', []).controller('dummy', function($scope) {
$scope.call= function(event){
$scope.valueText = angular.element(event.target).text();
}
});
<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="dummy">
<input type="text" ng-model="valueText" />
<ul class="dropdown-menu" role="menu" ng-click="call($event)">
<li><a>Text 1</a>
</li>
<li>
<a>Text 2</a>
</li>
</ul>
</div>
Hope this helps..!
I have bootstrap dropdown menu with the list of currencies (short, 3 letters form). I need it to act as a standard select input - access and focus item when the letter on the keyboard is pressed. The doc shows that is possible to use up/down key (this is working), but I need the full functionality. Is this possible?
This is the code:
<div class="form-group">
<label for="price"
class="col-md-3 control-label">Choose
currency</label>
<div class="col-md-9">
<div class="btn-group" id="currencyButton">
<button type="button"
class="currency-system btn btn-default hidden"></button>
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<span
class="caret"></span>
</button>
<ul class="currency-dropdown dropdown-menu" role=menu>
<?php foreach ($currencies as $currency): ?>
<li>
<a onclick="setCurrency('<?= $currency ?>'); return false;"
href="#"><?= $currency ?></a>
</li>
<?php endforeach ?>
</ul>
</div>
<p class="help-block">Choose
your preferred currency.</p>
</div>
</div>
I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.
Oh, JavaScript is not my forte.
The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.
If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.
Thanks.
You could use the Pillbox events to capture the pillbox data via the items method.
HTML:
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript:
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});
This example outputs into a JSON object structure, since the pillbox control supports text and value attributes (and more with data attributes) for each pill.
Is it possible to add AngularJS to a Boostrap dropdown (not a <select/>, but rather the Javascript component)? This is what I have:
<div class="form-group has-feedback" ng-class="{'has-error': editorForm.example.$invalid && !editorForm.example.$pristine, 'has-success': editorForm.example.$valid && !editorForm.example.$pristine}">
<label for="example">Example</label>
<div class="dropdown" id="example" style="width: 90%">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown"
data-toggle="dropdown">
{{exampleLabel}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li data-ng-repeat="example in examples" role="presentation"><a
role="menuitem" tabindex="-1"
data-ng-click="selectExample(example)"
href="javascript:void(0);">{{example.label}}</a>
</li>
</ul>
</div>
$scope.selectExample = function(val) {
$scope.example = val;
}
Is there a way for me to programatically set the validity in selectExample?
Add this hidden text box:
<input type="text" name="exampleLabel" ng-model="exampleLabel" hidden required />
and add this validation after the dropdown
<span class="text-danger" ng-show="myForm.exampleLabel.$error.required">
validation message
</span>
Add input type="hidden":
<form class="form-validation" name="actin_form">
<div uib-dropdown>
<input type="hidden" name="nameVal" ng-model="nameValModel" required/>
<button type="button" ng-class="{'input-error': actin_form.nameVal.$invalid}" class="btn" uib-dropdown-toggle>
<span>{{nameValModel}}</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="type in list" class="text-wrap">
<span>{{type.name}}</span>
</li>
</ul>
</div>
</form>
This work for me.hope you can get some idea.
<style>
.dropdown-has-error{
border-color: #a94442;//bootsrtap warning color
}
</style>
add ng-class directive to the dropdown button
ng-class="{'dropdown-has-error' : example == ''}
in the controller
$scope.example = '';
$scope.selectExample = function(val) {
$scope.example = val;
}
or you can check condition as in the above post,
ng-class="{'dropdown-has-error' : myForm.exampleLabel.$error.required}