Hi all could anyone help me with the below error please
i am having problem with the dropdown menu collapse i can select the option but the dropdown does not collapse when the option is selected and when i collapse it manually it gives me the below error
ERROR
core.js:4197 ERROR TypeError: this._documentClickListener is not a function
I have this function which select two different dataset
isFemaleSelected: boolean = true;
callMe(option: number) {
if (option === 1) {
this.AreaChartComponentRef.data = areaChartDataFemale;
this.AreaChartComponentRef.updateChart();
this.isFemaleSelected = true;
} else {
// this.isFemaleSelected = false;
this.AreaChartComponentRef.data = areaChartDataMale;
this.AreaChartComponentRef.updateChart();
this.isFemaleSelected = false;
}
Html code
When (click)="callMe(1) one is selected it displays the female and (click)="callMe(2) displays Male
<div
*ngIf="control"
class="btn-group float-right float-none-xs mt-2"
dropdown
>
<button
id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary btn-xs dropdown-toggle"
aria-controls="dropdown-basic"
*ngIf="isFemaleSelected"
>
{{ "dashboards.female-people" | translate }} <span class="caret"></span>
</button>
<button
id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary btn-xs dropdown-toggle"
aria-controls="dropdown-basic"
*ngIf="!isFemaleSelected"
>
{{ "dashboards.male-people" | translate }} <span class="caret"></span>
</button>
<ul
id="dropdown-basic"
*dropdownMenu
class="dropdown-menu"
role="menu"
aria-labelledby="button-basic"
>
<li role="menuitem">
<a class="dropdown-item" href="javascript:;" (click)="callMe(1)">{{
"dashboards.female-people" | translate
}}</a>
</li>
<li role="menuitem">
<a class="dropdown-item" href="javascript:;" (click)="callMe(2)">{{
"dashboards.male-people" | translate
}}</a>
</li>
</ul>
</div>
```
I solved this problem by creating a new function after callMe(option: number)
switchLabel() {
if (this.isFemaleSelected) {
return 'Female';
} else {
return 'Male';
}
}
and then
<div
*ngIf="control"
class="btn-group float-right float-none-xs mt-2"
dropdown
>
<button
id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary btn-xs dropdown-toggle"
aria-controls="dropdown-basic"
>
{{ switchLabel() }}<span class="caret"></span>
</button>
<ul
id="dropdown-basic"
*dropdownMenu
class="dropdown-menu"
role="menu"
aria-labelledby="button-basic"
>
<li role="menuitem">
<a
class="dropdown-item"
href="javascript:;"
(click)="switchData(1)"
>{{ "dashboards.female-people" | translate }}</a
>
</li>
<li role="menuitem">
<a
class="dropdown-item"
href="javascript:;"
(click)="switchData(2)"
>{{ "dashboards.male-people" | translate }}</a
>
</li>
</ul>
</div>
Related
In this code i am not able to console the selected dropdown in console.
HTML
<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" (change)="selectChangeHandler($event)">
<li class="dropdown-item" *ngFor="let option of selectedDay">{{option}}</li>
</ul>
</div>```
TS.
selectedDay = ['GCP','Azure','AWS'];
selectChangeHandler(event: any) {
this.selectedDay = event.target.value;
console.log(this.selectedDay)
}
You can not add change event to ul tag, you need change ul/li tag to select/option tag. And you should distint between selectedDay and listSelectedDay variable.
HTML
<div class="dropdown">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
>
Dropdown
</button>
<select class="dropdown-menu" (change)="selectChangeHandler($event)">
<option class="dropdown-item" *ngFor="let option of listSelectedDay">
{{ option }}
</option>
</select>
</div>
TS
export class AppComponent {
listSelectedDay = ['GCP', 'Azure', 'AWS'];
selectedDay = '';
selectChangeHandler(event: any) {
this.selectedDay = event.target.value;
console.log(this.selectedDay);
}
}
Demo code https://stackblitz.com/edit/angular-ivy-tapafd
May be You can use button for that code for e.g
----HTML----
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" name="selected" >
<li><a class="dropdown-item" data-bs-toggle="modal" *ngFor="let option of Menu">
<button class="btn btn-secondary" type="button" (click)="selectedChanged(option)">{{option}}</button>
</a></li>
</ul>
</button>
I'm trying to select a value from the drop down and pass the value in the JavaScript function. But in the JavaScript function i'm getting the value undefined. How can i resolve this?
Here goes the html
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu" onclick="dropDown_chooser()">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
and the javaScript
function dropDown_chooser() {
var select = document.getElementById("chooser");
var select_val = select.value;
console.log("select val" + select_val);
}
var dropdown = document.querySelectorAll('#chooser > li');
dropdown.forEach(function(item){
item.addEventListener('click',function(){
console.log(this.getAttribute('value'));
})
})
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
I guess you are using bootstrap by looking at the classes you have used; you can go with the following code then
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
And using jQuery
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).parent('li').attr("value");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
console.log("select val = " + param);
});
});
As stated in the comments, this is not a dropdown menu ,using "select" and
"option" is the proper way and you should use "onchange" instead of "onclick".
I posted it, like this it works, hope this helps!
function getvalue(){
var skillsSelect = document.getElementById("chooser");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);
alert(selectedText);
}
<div class="input-group-btn search-panel">
<select class="dropdown-menu" id="chooser" role="menu"
onchange="getvalue()">
<option value="type"><a href="#">Type</option>
<option value="loc"><a href="#">Location</option>
<option value="name"><a href="#">Name</option>
<option value="sal"><a href="#">Salary</option>
</select>
</div>
.
I'm trying to hide html element based on Session Value, using razor or js but i can't. I've tried more than one solution, but no result.
First attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li style="#(Session[" UserRole "].Equals("2 ") ? "display:none " : "display:block ")">
اعتماد الملاحظات
</li>
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Second attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session["UserRole"].ToString().Equals("1")) {
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Any suggestion?
Try below logic, it may work for you
<li style="#(Session["UserRole"].ToString() == "2" ? "display:block" : "display:none")">
Just use an if instead of mixing with the element's style:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session[" UserRole "].Equals("2 "))
{
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
I made a dropdown list using bootstrap.Dynamically I want to disable and enable the dropdown list.
html code:
<div class="span3 offset1">
<select name="primary" class="select-block" id="select_alert" style="display: none;">
<option "selected"="">Choose Alert T</option>
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
</select>
<div class="btn-group select select-block">
<i class="dropdown-arrow dropdown-arrow-primary"></i>
<button class="btn dropdown-toggle clearfix btn-primary" data-toggle="dropdown" id="select_alert">
<span class="filter-option pull-left">Choose Alert T</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-primary" role="menu">
<li rel="0" class="selected">
<a tabindex="-1" href="#" class="">
<span class="pull-left">Choose Alert T</span>
</a>
</li>
<li rel="1">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T1</span>
</a>
</li>
<li rel="2">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T2</span></a>
</li>
<li rel="3">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T3</span>
</a>
</li>
<li rel="4">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T4</span>
</a>
</li>
</ul>
</div>
</div>
some times I want to disable and sometimes I want to enable.So How can I do this.
In this I have 2 more dropdown elemnts.All are placed in singlw div tag.Here I didn't mention that div tag id name.I just putted single dropdown element code.
Yes, by jquery you can get this:
Here is the example:
http://jsfiddle.net/jV7ye/
$(document).ready(function() {
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", true);
} else {
$("#dropdown").prop("disabled", false);
}
});
});
UPDATED JS CODE as per your need:
$(document).ready(function() {
if(!$("#chkdwn2").is(":checked"))
{
$("#dropdown").prop("disabled",true);
}
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", false);
} else {
$("#dropdown").prop("disabled", true);
}
});
});
Replace dropdown id with your id. Thanks
By using jquery we can do
Disable Dropdown
$('.select_alert').attr('data-toggle','');
Enable Dropdown
$('.select_alert').attr('data-toggle','dropdown');
If above solutions does not work for you, the try
$('#yourDropDownElement').prop('disabled', true).trigger('chosen:updated');
I'm using boostrap v 3.3.6
You can do this by add if block on the property and add disabled class to the drop down.
below is my div in that i have eanbled/disabled dropdown toggle button on IsNewEditDisabled
<button ng-if="!IsNewEditDisabled" class="btn dropdown-toggle" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>
<button ng-if="IsNewEditDisabled" class="btn dropdown-toggle disabled" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>