Cannot get selected value from javascript dropdown list - javascript

I have the following code for a dropdown menu
<div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle" type="button" id="DataVersionDropDownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dataset Version
</button>
<div class="dropdown-menu" id="DataVersionDDMenu" aria-labelledby="dropdownMenuButton">
</div>
It is populated dynamically
var datadirnames = ["NewData", "OldData", "EvenOlderData"];
for (var i = 0; i < datadirnames.length; i++) {
var opt = datadirnames[i];
var el = document.createElement("a");
el.classList = "dropdown-item";
el.href = "#";
el.textContent = opt;
el.value = opt;
document.querySelector(".dropdown-menu").appendChild(el);
}
When I select an item from the drop down menu the following is called but I cannot access the item selected or get it to be displayed as the text for the dropdown menu.
$("#DataVersionDDMenu").click(function() {
console.log("DropDown selected ");
var e = document.getElementById("DataVersionDDMenu");
var value = e.options[e.selectedIndex].value;
$.ajax({
type: 'POST',
url: '#Url.Action("Volumes", "DataVersionSelect", new{id = 1, com="volumes"})',
data: { "value": $("#DataVersionDDMenu").val() },
success: function (data){
console.log("data is " + data);
}
});
});
Output is:
DropDown selected
Uncaught TypeError TypeError: Cannot read properties of null (reading 'options')
What value needs to go in document.getElementById()?, is that my problem?
There seems to be so many different ways of having and using a dropdown list that I am getting confused as new to this and haven't had any luck looking at other poster's similar questions.
Any help would be greatly appreciated.
Thanks

Related

How to make dynamic non-repeatable select

I have try to create Dynamic Input group
My expected is
dynamic selection box[length in config var parameter] with...
Non-duplicate select option --> I check when click ,remove and append
Can click to add/remove input group
limited by var parameter
So now My actual result is
not hide will be select option in new select of previous select on append
delete select can't check the repeating after remove
But After i click some where will back to normal as i expect a little because item what i click still no update
So here for long code
Thank for viewing
var parameter =[
"A"
,"B"
,"C"
,"D"
];
$(document).ready(function(e){
$('div.multiselect').append('<div class="selectlist"></div>');
$('div.multiselect').append('<button class="btn btn-outline-light addlist">add search parameter</button>');
$('div.multiselect').append('<button class="btn btn-success search">search</button>');
addSelect();//Create first
$('div.multiselect .addlist').click(function(){
addSelect();
});
});
(function($) {
var origAppend = $.fn.append;
$.fn.append = function () {
return origAppend.apply(this, arguments).trigger("append");
};
})(jQuery);
var selectblock = function (){
var outside = $(document.createElement("div")).addClass('input-group');
var inside = $(document.createElement("select")).addClass('custom-select').on("click append",checkRepeat);
var selVal=[];
$("div.multiselect .selectlist div.input-group").each(function(){
selVal.push($(this).find("select").val());
});
if(selVal.length == parameter.length){
alert("Can't add more parameter");
return;
}
for (var i =0 ; i < parameter.length ; i++){
var option = $(document.createElement("option")).val(parameter[i]).text(parameter[i]);
if($.inArray(parameter[i], selVal) > -1){
option.attr("disabled","disabled").hide();
}
inside.append(option);
}
outside.append(inside);
outside.append($(document.createElement("input")).attr('Type','Text').addClass('form-control'));
var delbtn = $(document.createElement("button")).text("X").addClass('btn btn-danger input-group-append dellist');
delbtn.click(function(){
$(this).parent().remove();
checkRepeat;
});
outside.append(delbtn);
return outside;
};
function addSelect(){
$('div.multiselect .selectlist').append(selectblock);
checkRepeat;
}
var checkRepeat = function (){
//console.log('trigger');
var selVal=[];
$("div.multiselect .selectlist div.input-group").each(function(){
selVal.push($(this).find("select").val());
});
$(this).parent().siblings("div.multiselect .selectlist div.input-group").find("select").find("option").removeAttr("disabled").show().filter(function(){
var a=$(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value!=a));
}).attr("disabled","disabled").hide();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiselect">

Data is returned as undefined

I have this sortable function in which I want to be able to add users to a group. When I drag the user from the user-table to the group-table, I want to able to check if that ID already exists in the group-table, and if it does I want to respond with a error-message. However, when I try to loop trou and get the ID's from the group-table, I'm getting a undefined value.
HTML-code:
<div class="userContainer">
<div id="userDiv">
<ul class="userList dragable" ></ul>
</div>
<div id="groupDiv">
<select id="DropDown"></select>
<input id="btnGetGroups" class="btn btn-success" type="button"
value="Hämta grupper" />
<select id="DropDownGroups"></select>
<input id="btnShowGroups" class="btn btn-success" type="button"
value="Visa grupp" />
<ul class="usersOfGroupList dragable"></ul>
</div>
</div>
Here is the code for filling the group-table with current users:
$('#btnShowGroups').click(function () {
var e = document.getElementById("DropDownGroups");
groupId = e.options[e.selectedIndex].value;
$('.usersOfGroupList').empty();
$.getJSON("mylinkgoeshere" + groupId + "", function (result) {
$.each(result, function (i, value) {
$('.usersOfGroupList').append($("<li id='userElement' data-userId='' ></li>").data('userId', value.Id).html(value.FirstName + " " + value.LastName));
$(".usersOfGroupList").addClass("addBorder");
});
});
});
As you can see I'm using 'userId' as key in the data-property here.
The sortable-code looks like this:
$(".dragable").sortable({
connectWith: ".usersOfGroupList",
remove: function (e, ui) {
var $this = $(this);
var childs = $this.find('li');
if (childs.length === 0) {
$this.text("Nothing");
}
},
receive: function (e, ui) {
var array = [];
var $this = $(this);
var children = $this.find('li');
for (var i = 0; i < children.length; i++) {
var specificId = children[i].item.data('userId');
array.push(specificId);
console.log(array);
};
In the receive-property, I'm trying to get the current userIDs by looping trough all the li-elements and then push the ID's into a array, but it will only return undefined. I've debugged and the li-elements are there, but it gives me this error-message:
Uncaught TypeError: Cannot read property 'data' of undefined
at HTMLUListElement.receive

Unable to close Modal due to Uncaught TypeError: Cannot set property 'onclick' of null

When I run the following code, when I click on the Current Children option of the dropdown menu, the corresponding Modal displays on my screen but then I am unable to close it as I get the following error at `
spanModal.onclick = function()
The error is:
userTemplate.js:25 Uncaught TypeError: Cannot set property 'onclick' of null
at HTMLAnchorElement.<anonymous> (userTemplate.js:25)
at HTMLAnchorElement.dispatch (jquery-3.2.1.js:5206)
at HTMLAnchorElement.elemData.handle (jquery-3.2.1.js:5014)
Why do I get this error?
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>Current Children</li>
<li>
</ul>
</li>
</ul>
</div>
<div id="currentChildrenModal" class="modal">
<div class="modal-content">
<span class="close" id="currentChildrenModalSpan">×</span>
<p>List of all currently enrolled children. Include option to filter by group.</p>
</div>
</div>
Javascript:
$(".menu").on("click", function()
{
var modalFireButton;
var modalName;
var spanModal;
var span;
//get Id of button cliced
modalFireButton = $(this).attr('id');
//set variable for corresponding modal
modalName = (modalFireButton + "Modal");
modalName = document.getElementById(modalName);
span = (modalName + "Span");
spanModal = document.getElementById(span)
// spanModal = document.getElementById(spanModal);
modalName.style.display='block';
spanModal.onclick = function()
{
modalName.style.display = "none";
}
});
Change
span = (modalName + "Span");
to
span = (modalName.id + "Span");
modalName refers to <div id="currentChildrenModal" class="modal"> and to get currentChildrenModal you need to use modalName.id and append Span to get handle to span <span class="close" id="currentChildrenModalSpan">×</span>
Your modalName is supposed to be a string, but the following line makes it an element:
modalName = document.getElementById(modalName);
That's why your span variable is not a correct string to get the element. You can't attach onclick to the spanModal element if it can't be found. One good thing to try is to name your variables so that you can easily find out what they mean. Try the following:
$(".menu").on("click", function()
{
var modalFireButton;
var modalName;
var modalElm;
var spanModal;
var spanName;
modalFireButton = $(this).attr('id');
//set variable for corresponding modal
modalName = (modalFireButton + "Modal");
spanName = (modalName + "Span");
modalElm = document.getElementById(modalName);
spanModal = document.getElementById(spanName)
modalElm.style.display='block';
spanModal.onclick = function()
{
modalElm.style.display = "none";
}
});
This part of your code is wrong:
modalName = document.getElementById(modalName);
span = (modalName + "Span");
spanModal = document.getElementById(span)
As you are trying to concatenate an HTMLElement with a string.

Angular 1.5 when select all in input checkbox, value won't bind to model

Hi I am using https://vitalets.github.io/checklist-model/ to bind data from a checkbox to the model. When a user selects a checkbox it successfully binds data. However, I need the options to also "select all" I have followed the instructions in the documentation and have tried mapping all the value in the array so when the user "selects all" all the values are binded into the model. Instead of that happening I get an array with value of null. Here is how the flow works
1)init() function is called returning data when the user loads the application
2)user selects an air_date
3)user gets syscode data return after ng-options getSyscodes() is called
4)A user can select multiple syscodes
5)User can "select all" this is where my issue is, when I call selectAll(), instead of returning every value in array, the array returns as "null" and I can't make a call to the API.
I would appreciate any suggestions thanks!
Here is my HTML
Array Structure of Every Object
{syscode:1233,readable_name: "MTV"}
<form>
<div class="form-group">
<pre>Selected Model: {{rc.selections.syscode}} </pre>
<label>Syscode</label>
<!-- <select class="form-control" ng-options="syscode.readable_name for syscode in rc.dropdowns.syscodes" ng-model="rc.selections.syscode" ng-disabled="rc.dropdowns.syscodes.length === 0">
</select> -->
</div>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width:214px;height:33px;font-size:15px;margin-left:-16px;"><i class="fa fa-caret-down pull-right" aria-hidden="true" style="width:1em;"></i></button>
<ul class="dropdown-menu">
<button class="btn btn-success btn-md" ng-click="rc.selectAll()"><i class="fa fa-check" aria-hidden="true"></i>Select All</button>
<button class="btn btn-danger btn-md" ng-click="rc.unselectAll()"><i class="fa fa-times" aria-hidden="true"></i>Unselect All</button>
<li ng-repeat="value in rc.dropdowns.syscodes">
<input type="checkbox" checklist-model="rc.selections.syscode" checklist-value="value.syscode" ng-checked="rc.selections.checked" /> {{value.readable_name}}</li>
</ul>
</form>
And Controller
ReportsController.$inject = ['ReportService','$window', '$q'];
function ReportsController(ReportService, $window, $q){
//Sorting Values
var ctrl = this;
//Initial State Values
ctrl.results = [];
ctrl.pageDone = false;
ctrl.loading_results = false;
ctrl.search_enabled = false;
ctrl.searching = false;
//Initial data arrays
ctrl.dropdowns = {
air_dates:[],
syscodes:[],
syscodeArray:[]
};
ctrl.test = null;
//Data binding objects
ctrl.selections = {
air_date:null,
checked: null,
syscode:null,
getAll: false
};
//Get Syscodes
ctrl.selectSyscode = function(){
ctrl.search_enabled = true;
ctrl.dropdowns.syscodes = [];
ctrl.dropdowns.syscodeArray = [];
ReportService.getSyscodes(ctrl.selections).then(function(response){
ctrl.dropdowns.syscodes = response.data;
//This line below enables select all in UI
ctrl.dropdowns.syscodeArray.push(response.data);
console.log("SyscodeArray", ctrl.dropdowns.syscodeArray);
});
};
// Select All Logic
ctrl.selectAll = function(){
var newitems = [];
angular.forEach(ctrl.dropdowns.syscodes, function(syscode) {
ctrl.selections.checked = 1;
newitems.push(syscode.syscode);
});
ctrl.selections.syscode = newitems;
}
// Unselect All
ctrl.unselectAll = function(){
angular.forEach(ctrl.dropdowns.syscodeArray, function(user) {
ctrl.selections.checked = 0;
});
ctrl.selections.syscode = [];
}
//Search Logic by Syscode and Air_Date
ctrl.search = function () {
var defer = $q.defer();
if (ctrl.search_enabled) {
ctrl.searching = true;
ctrl.error = false;
ctrl.sort_by = {
col: 'market',
reverse: true
};
ctrl.filters = undefined;
ReportService.getAssets(ctrl.selections).then(function (response) {
ctrl.results = response.data;
console.log("It worked!!!",response.data);
ctrl.searched_once = true;
ctrl.searching = false;
defer.resolve('searched');
}, function (error) {
defer.reject('search-error');
ctrl.error = true;
ctrl.searching = false;
ctrl.error_data = error;
});
} else {
defer.resolve('no-search');
}
return defer.promise;
};
//Calls initial air dates
var init = function(){
ReportService.getAirDates().then(function(response){
ctrl.dropdowns.air_dates = response.data;
console.log(response.data);
ctrl.pageDone = true;
});
};
init();
}
angular.module('command-center-app').controller('ReportsController', ReportsController);
I tried this, I looped through the array and made a new array containing only "syscode". That array I assigned it ctrl.selections.syscode which is the model. This should be the correct answer
ctrl.selectAll = function(){
var newitems = [];
angular.forEach(ctrl.dropdowns.syscodes, function(syscode) {
ctrl.selections.checked = 1;
newitems.push(syscode.syscode);
});
ctrl.selections.syscode = newitems;
}
There is something wrong with your implementation i think. The library uses an array to handle the checked values in it. But i don't think you are doing that. Plus ng-checked should be there. So:
<li ng-repeat="value in rc.dropdowns.syscodes">
<input type="checkbox" checklist-model="rc.selections.checked" checklist-value="value.syscode" />
{{value.readable_name}}
</li>
In the controller:
// Select All Logic
ctrl.selectAll = function(){
ctrl.selections.checked = [];
angular.forEach(ctrl.dropdowns.syscodeArray, function(user) {
ctrl.selections.checked.push( //iterate over all syscodes and push here
});
}
// Unselect All
ctrl.unselectAll = function(){
ctrl.selections.checked = [];
}
Let me know how it goes.

dynamically create items in drop down list in bootstrap

Small part of my html code :
<div class="text-center">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Platforms <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id = "buttonsPlace">
</ul>
</div>
In my js file :
for (i = 0; i < platformList.length; i++) {
var li = $("<li/>" , { id : "plat"+i,class : "dropdown" text : platformList[i] } )
//var text = document.createTextNode(platformList[i]);
//li.appendChild(text);
//btn.data("platform", platformList[i] );
$("#buttonsPlace").append(li);
console.log("hiding");
$("#plat" + i).hide();
}
However the menu is appearing but the menu items are not. where am i going wrong
Try This
$(function() {
var change = function( txt ) {
$("#ID").append( '<li>' + txt + '</li>' );
};
change("this is the first change");
change("this is the second change");
});
Demo
For Li Click
$("ul").on('click', 'li', function () {
var id = this.id;
//play with the id
});
$(function(){
$('.dropdown-toggle').click(function(){
var countRows = $('ul.dropdown-menu li').size();
$('.dropdown-menu').append('<li>Row '+countRows+'</li>');
countRows++;
});
});
Here is the jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/
$('#drowdown-link1').click(function(e){
e.preventDefault();
window.location.href = 'http://example.com';
});
Here is another jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/4/

Categories

Resources