We Keep Coding

load data in custom dropdown using JavaScript, Ajax

I am working on web application built on Spring Boot and using JavaScript as a frontend technology. So here I am facing a problem on my index page. There are dropdowns on which after clicking there are some options coming from API. The problem is, when my index page loads then if user clicks on dropdown to choose some category then data does not loaded. It is a custom dropdown.
This is an HTML of dropdown:
<div class="col-6">
<label class="sr-only" for="inlineFormInputGroup" style="color: red;"> </label>
<div class="custom-select-div">
<select id="category" name="category">
<option value='0'>Choose your category</option>
</select>
</div>
</div>
Below is my JavaScript code for custom dropdown:
<script>
$(document).ready(function() {
setTimeout(function(){
getcategorylist();
});
setTimeout(function(){
var x, i, j, l, ll, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select-div");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);
},500);
});
function getcategorylist(){
var maincategory = document.getElementById('maincategory').value;
$.post("<%=AkApiUrl.getcategorybymaincategory%>",{
maincategory : maincategory,
},
function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
debugger
var list = data.response;
var categorys='';
if(list.length > 0){
for (var i = 0; i < list.length; i++) {
var content = "<option value='"+list[i].categoryid+"'>"+list[i].name+"</option>";
categorys = categorys + content;
}
}
categorys = "<option value='0' style='display: none;'>Choose your category</option>"+categorys;
document.getElementById('category').innerHTML = categorys;
}else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}
$("#searchBtn").click(function() {
var maincategoryid = document.getElementById('maincategory').value;
var latitude = document.getElementById("latitude").value;
var longitude = document.getElementById("longitude").value;
var location = document.getElementById("address").value;
var categoryid = document.getElementById("category").value;
var category = $("#category option:selected").text();
var maincategory = "Truck-Trailer";
if(maincategoryid == '1'){
maincategory = "Truck-Trailer";
}else if(maincategoryid == '2'){
maincategory = "Cars";
}else if(maincategoryid == '3'){
maincategory = "RV-Bus";
}else {
maincategory = "Truck-Trailer";
}
if (latitude == "" || latitude == null || longitude == "" || longitude == null || categoryid == 0) {
if (latitude == "" || latitude == null || longitude == "" || longitude == null) {
$("#location").addClass("errorInput");
return false;
} else {
$("#location").removeClass("errorInput");
}
if (categoryid == 0) {
$("#category").addClass("errorInput");
return false;
} else {
$("#category").removeClass("errorInput");
}
}else{
category = category.replaceAll(" & ", "-").replaceAll(" ", "-");
location = location.replaceAll(", ", "-").replaceAll("&", "-").replaceAll(" ", "_");
document.getElementById("listingForm").action = "<%=WebUrl.listing%>/"+maincategory+"/"+category+"/"+location;
document.getElementById("listingForm").submit();
}
});
</script>
Data did not get loaded on first time when DOM loaded after refreshing page from 1-2 times then sometimes data get visible inside the dropdown. So what should I do?

Why is this Undefined and how do i fix this? C#

I'm creating a scenario where I need 3 radio buttons for multiple questions. I added values to the radio button and I want to add up the total points of the selected radio button and display it into a text box.
Here's is my code and I'm having difficulties with trying to figure out why I'm getting an undefined error message.
function getSelectionPoints(selection) {
return parseInt(selection.split(",")[1]);
}
function getSelectionObj(selectionID) {
var selection = null;
if(selectionID == 1)
selection = document.getElementById("<%=selection1.ClientID %>").getElementsByTagName("input");
else if (selectionID == 2)
selection = document.getElementById("<%=selection2.ClientID %>").getElementsByTagName("input");
else if (selectionID == 3)
selection = document.getElementById("<%=selection3.ClientID %>").getElementsByTagName("input");
return selection;
}
function getTotalPoints() {
var totalPoints = 0;
var selection;
var promotionDropdown = document.getElementById("<%=dropDownPromotionTo.ClientID %>");
var promotionFromID = parseInt(document.getElementById("<%=promotionIDFromHidden.ClientID %>").value);
var promotionToID = parseInt(promotionDropdown.options[promotionDropdown.selectedIndex].value);
for (var i = 1; i <= 9; i++) {
selection = getSelectionObj(i);
if (i == 9 && (promotionFromID == 2 || promotionFromID == 3 || promotionToID == 2 || promotionToID == 3)) {
totalPoints += 0;
}
else if (selection != null) {
for (var j = 0; j < selection.length; j++) {
if (selection[j].checked) {
totalPoints += getSelectionPoints(selection[j].value);
break;
}
}
}
}
alert(totalpoints);
return totalPoints;
}
<asp:RadioButtonList ID="selection1" runat="server"
EnableTheming="True" SkinID="Black" CausesValidation="True" onchange="updateMyPoints(false, true);">
<asp:ListItem Value="1,6">Spectacular</asp:ListItem>
<asp:ListItem Value="2,4" Selected="True">Average</asp:ListItem>
<asp:ListItem Value="3,0">Needs improvement</asp:ListItem>
</asp:RadioButtonList>

JavaScript is case sensitive, use totalPoints instead of totalpoints:
alert(totalPoints);

Multi delete checkbox on button click does not work as required

I have a grdiview in which I have added the Multi-delete functionality. Please see the code for your reference:-
<script type="text/javascript">
function ValidateAll() {
var chkselectcount = 0;
var gridview = document.getElementById('<%= grdTeacherProfile.ClientID %>');
for (var i = 0; i < gridview.getElementsByTagName("input").length; i++) {
var node = gridview.getElementsByTagName("input")[i];
if (node != null && node.type == "checkbox" && node.checked) {
chkselectcount = chkselectcount + 1;
}
}
if (chkselectcount == 0) {
alert("Please select atleast One CheckBox");
return false;
}
else {
ConfirmationBox();
}
}
function ConfirmationBox() {
var result = confirm("Are you sure, you want to delete the Users ?");
if (result) {
return true;
}
else {
return false;
}
}
</script>
Also see the button html:-
<asp:Button ID="btnDelete" runat="server" CausesValidation="false" CssClass="btn btn-danger" Text="Delete" OnClick="btnDelete_Click" OnClientClick="javascript:return ValidateAll();" />
The issue is that,
when I check the checkboxes and Click on delete button, it asks for confirmation. When I click on Cancel it still deletes the row from the Gridview as well as sql table.
What should I do for the proper working of this. ? Please suggest

I think you need to use
return ConfirmationBox();
instead of
ConfirmationBox();
So your code becomes
function ValidateAll() {
var chkselectcount = 0;
var gridview = document.getElementById('<%= grdTeacherProfile.ClientID %>');
for (var i = 0; i < gridview.getElementsByTagName("input").length; i++) {
var node = gridview.getElementsByTagName("input")[i];
if (node != null && node.type == "checkbox" && node.checked) {
chkselectcount = chkselectcount + 1;
}
}
if (chkselectcount == 0) {
alert("Please select atleast One CheckBox");
return false;
}
else {
return ConfirmationBox();
}
}
You need to remove the javascript: from OnClientClick you can use OnClientClick="return ValidateAll();"

add change language button with javascript is not working

My javascript code:
var footer = document.getElementsByTagName('footer');
for (var i = 0; i < footer.length; ++i) {
var appendTo = footer[0].getElementsByTagName('p'); //get only the p in the first footer to select
if(language.indexOf('nl') <= -1 && location.href.indexOf("/") >= 0 && location.href.indexOf("/en/") <= -1) {
for (var i = 0; i < appendTo.length; ++i) {
appendTo[0].innerHTML += '<div class="language item switch en">english</div>';
}
} else if(language.indexOf('nl') == 0 && location.href.indexOf("/en/") >= 0 ) {
for (var i = 0; i < appendTo.length; ++i) {
appendTo[0].innerHTML += '<div class="language item switch nl">nederlands</div>';
}
} else {}
}
I don't get any console errors. I want to add a 'change language' button when a user is not on the correct language site. Where did I go wrong in my code?

the variable language isn't defined in your function. If you declare it, it seems to work fine.
var language = window.navigator.userLanguage || window.navigator.language;
language = language.split("-");
var footer = document.getElementsByTagName('footer');
for (var i = 0; i < footer.length; ++i) {
var appendTo = footer[0].getElementsByTagName('p'); //get only the p in the first footer to select
if(language.indexOf('nl') <= -1 && location.href.indexOf("/") >= 0 && location.href.indexOf("/en/") <= -1) {
for (var i = 0; i < appendTo.length; ++i) {
appendTo[0].innerHTML += '<div class="language item switch en">english</div>';
}
} else if(language.indexOf('nl') == 0 && location.href.indexOf("/en/") >= 0 ) {
for (var i = 0; i < appendTo.length; ++i) {
appendTo[0].innerHTML += '<div class="language item switch nl">nederlands</div>';
}
} else {}
}
Updated fiddle: http://jsfiddle.net/ecsuZ/2/

Javascript - Dynamically generate span IDs after styling radio buttons

I have a problem. I'm trying to do a show/hide on the "activationframe" and "equipmentframe" divs based on a radio button selection. I had it working fine but then the client decided to add styled radio buttons to the equation. That has broken my show/hide toggle. How do I incorporate that into the styled radio button JS?
Here is the styled radio buttons script:
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
Here is my old script that does the show/hide:
function showhideInstall(installtype) {
if (installtype == "equipmentswap") {
document.getElementById("activationframe").style.display = 'none';
document.getElementById("equipmentframe").style.display = 'block';
} else {
document.getElementById("activationframe").style.display = 'block';
document.getElementById("equipmentframe").style.display = 'none';
}
}
And finally, my HTML:
<div id="activationtoggle">
<form class="radiobuttons">
<input type="radio" name="installtype" value="activation" class="styled" onclick="showhideInstall(this.value);" checked> New Activation
<input type="radio" name="installtype" value="equipmentswap" class="styled" onclick="showhideInstall(this.value);" > Equipment Swap
</form>
</div>
<div id="activationframe">
<div id="activationchecklist">
code here
</div>
<div id="equipmentframe">
<div id="equipmentswap">
<h2>Equipment Swap</h2>
more code here
</div>
Any help would be GREATLY appreciated. I'm middling at JS (at best) and this has proven to be a giant time sink.

Had a friend help me resolve the problem, thanks for the help, everyone.
Here is the JS he supplied me with:
function showhideInstall(installtype) {
if (installtype == "equipmentswap") {
document.getElementById("activationframe").style.display = 'none';
document.getElementById("equipmentframe").style.display = 'block';
} else {
document.getElementById("activationframe").style.display = 'block';
document.getElementById("equipmentframe").style.display = 'none';
}
}
function newactivation( indexNum ) {
var inputs = document.getElementsByTagName("label");
for(a = 0; a < inputs.length; a++) {
if( inputs[a].id == "activation" + indexNum ){
inputs[a].style.color = "#b5b5b5";
}
}
var activechecked = 0;
for (var i = 1; i<= 7; i++) {
if(document.getElementById("activationcheck" + i).checked == true){
activechecked ++;
}else if(document.getElementById("activationnocheck" + i).checked == true){
activechecked ++;
}
}
if (activechecked <= 6) {document.getElementById("next").disabled= true;}
if (activechecked == 7) {document.getElementById("next").disabled= false; document.getElementById("next").style.cursor= "pointer"; }
}
function equipmentswap( indexNum ) {
var inputs = document.getElementsByTagName("label");
for(a = 0; a < inputs.length; a++) {
if( inputs[a].id == "equip" + indexNum ){
inputs[a].style.color = "#b5b5b5";
a=inputs.length + 1;
}
}
var activechecked = 0;
for (var i = 1; i<= 7; i++) {
if(document.getElementById("swapcheck" + i).checked == true){
activechecked ++;
}else if(document.getElementById("swapnocheck" + i).checked == true){
activechecked ++;
}
}
if (activechecked <= 6) {document.getElementById("equipnext").disabled= true;}
if (activechecked == 7) {document.getElementById("equipnext").disabled= false; document.getElementById("next").style.cursor= "pointer"; }
}