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" );
}
});
Related
I can’t select elements of the bootstrap drop-down list due to overlapping by another element, as in the screenshot the footer overlaps the two lower elements of the list and they cannot be selected.
I use bootstrap styles.
Such a problem with all dropdowns ...
How to solve this problem?
<div class="form-group">
<div id="select-form-control">
<label for="teamUsers">Выберите участников</label>
<div class="dropdown bootstrap-select show-tick form-control show" style="width: 97%;">
<select id="teamUsers" name="teamUsers" class="selectpicker form-control"
data-actions-box="true" data-dropup-auto="false" data-live-search="true"
data-selected-text-format="count" data-size="10"
data-style="btn-info text-white" data-width="97%" multiple="" required=""
tabindex="-98">
<option value="5">stud stud</option>
<option value="3">student student</option>
<option value="3">student student</option>
<option value="4">student student</option>
</select>
<button type="button" class="btn dropdown-toggle btn-info text-white bs-placeholder"
data-toggle="dropdown" role="combobox" aria-owns="bs-select-1"
aria-haspopup="listbox" aria-expanded="true" data-id="teamUsers"
title="Ничего не выбрано">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">Ничего не выбрано</div>
</div>
</div>
</button>
<div class="dropdown-menu show" x-placement="bottom-start"
style="overflow: hidden; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(6px, 52px, 0px);">
<div class="bs-searchbox"><input type="search" class="form-control"
autocomplete="off" role="combobox"
aria-label="Search" aria-controls="bs-select-1"
aria-autocomplete="list"></div>
<div class="bs-actionsbox">
<div class="btn-group btn-group-sm btn-block">
<button type="button" class="actions-btn bs-select-all btn btn-light">
Выбрать все
</button>
<button type="button" class="actions-btn bs-deselect-all btn btn-light">
Отменить все
</button>
</div>
</div>
<div class="inner show" role="listbox" id="bs-select-1" tabindex="-1"
aria-multiselectable="true" style="overflow-y: auto;">
<ul class="dropdown-menu inner show" role="presentation"
style="margin-top: 0px; margin-bottom: 0px;">
<li><a role="option" class="dropdown-item" id="bs-select-1-0" tabindex="0"
aria-selected="false" aria-setsize="4" aria-posinset="1"><span
class=" bs-ok-default check-mark"></span><span class="text">stud stud</span></a>
</li>
<li><a role="option" class="dropdown-item" id="bs-select-1-1" tabindex="0"
aria-selected="false" aria-setsize="4" aria-posinset="2"><span
class=" bs-ok-default check-mark"></span><span class="text">student student</span></a>
</li>
<li><a role="option" class="dropdown-item" id="bs-select-1-2" tabindex="0"
aria-selected="false"><span class=" bs-ok-default check-mark"></span><span
class="text">student student</span></a></li>
<li><a role="option" class="dropdown-item" id="bs-select-1-3" tabindex="0"
aria-selected="false"><span class=" bs-ok-default check-mark"></span><span
class="text">student student</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am having a select box in my form, and after page loading, it is then transformed to bootstrap button before the select box. I can't set the selected value for the converted bootstrap button drop-down li.
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="Occupation" title="-- Please select Occupation--">
<span class="filter-option pull-left">-- Please select Occupation--</span> <span class="bs-caret">
<span class="caret"></span></span></button>
<div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu">
<li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">-- Please select Occupation--</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Salaried</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Business</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Above 18 Years</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div>
<select name="Occupation" class="form-control show-tick" required="" tabindex="-98">
<option value="">-- Please select Occupation--</option>
<option value="Salaried">Salaried</option>
<option value="Business">Business</option>
<option value="Above 18">Above 18 Years</option>
</select>
I am having the value in localStorage.getItem('Occupation'), and I tried to set the value to that li by using
$('#Occupation ul li').eq(1).find('span').eq(1).text(localStorage.getItem('Occupation')); //not worked
$('#Occupation').parents('.btn-group').find('.dropdown-toggle').html(localStorage.getItem('Occupation')+' <span class="caret"></span>'); //not worked
$("#Occupation li a").filter("[value=" + localStorage.getItem('Occupation') + "]"); //not worked
$("#Occupation").html(localStorage.getItem('Occupation') + ' <span class="caret"></span>'); //not worked
Could someone suggest to me a solution to set the value to that drop-down?
Thanks :)
Upon checking, there is a plugin (bootstrap-select) installed in my site. That plugin modifies my select box to the bootstrap button.
Then I visited the plugin site and got a solution,
$('select[name="Occupation"]').selectpicker('val', localStorage.getItem('Occupation'));
I am facing one problem, I want to show an error when the user has not selected any service from selectbox. I have two checkboxes of Nails and Hair, when user selects the Nails checkbox then, the user must have to select the service from the selectbox. If the user does not select the Hair checkbox then, the selectbox is not mandatory that is below Hair. If both are checked and then both below service must be selected with span serror message. Here is my html:-
enter code here
<div class="one-row">
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/48031.png">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="0" name="services[]" value="1">
<label for="0">Nails</label>
</p>
</span>
<select id="checkSelect-0" name="service_type[Nails]" class="selectpicker" style="display: none;">
<option value="">Select Service</option>
<option value="Salon">Salon</option>
<option value="Mobile beautician">Mobile beautician</option>
<option value="Both">Both</option>
</select>
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-0" title="Select Service"><span class="filter-option pull-left">Select Service</span> <span class="caret"></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
<span id="serviceError-0" style="color: rgb(169, 68, 66);">Please select service</span>
</div>
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/55643.png">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="1" name="services[]" value="2">
<label for="1">Hair</label>
</p>
</span>
<select id="checkSelect-1" name="service_type[Hair]" class="selectpicker" style="display: none;">
<option value="">Select Service</option>
<option value="Salon">Salon</option>
<option value="Mobile beautician">Mobile beautician</option>
<option value="Both">Both</option>
</select>
<div class="btn-group bootstrap-select dropup">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-1" title="Salon" aria-expanded="false"><span class="filter-option pull-left">Salon</span> <span class="caret"></span></button>
<div class="dropdown-menu open" style="max-height: 519.375px; overflow: hidden; min-height: 92px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 507.375px; overflow-y: auto; min-height: 80px;">
<li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
<span id="serviceError-1" style="color:#A94442; display:none;">Please select service</span>
</div>
Image:-
Now you see that every category having own selectbox
Here is my jquery code :-
$("#checkservice").on('click',function() { // click event on submit button
var n = $( "input:checked" ).length; //
if(n == 0) {
alert("Please Select atleast One Service"); return false;
}
for (var i = 0; i <= 1; i++) {
if ($('#'+i).is(":checked")) {
if ($("#checkSelect-"+i).val() === "") {
$("#serviceError-"+i).show();
return false;
}
}
}
});
This jquery code works only for first checkbox when i select nails and not select any service it will show error but when i select hair checkbox its not showing error
Image:-
I am using laravel framework. Please help me
function onSubmit()
{
var fields = $("input[name='list']").serializeArray();
if (fields.length == 0)
{
alert('nothing selected');
// cancel submit
return false;
}
else
{
alert(fields.length + " items selected");
}
}
// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="subscribeForm">
<fieldset id="cbgroup">
<div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div>
<div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div>
<div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit" value="submit">
</form>
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.
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}