We Keep Coding

JavaScript TypeError only in IE 11

When loading a js e-form in IE getting an error 'loadForm: if GroupDocList>0: TypeError: Unable to get property 'length; of undefined or null reference
This only occurs in IE not Chrome or Edge.
This form was coded by someone else and I don't have much experience with JS
Update * Through debugging I was able to find that it is the CompList object that is undefined and causing this error. Wondering why this is being undefined at this point within IE but working within Chrome and Edge or at least not throwing the error.
for (var i = 0; i < CompList.length; i++) {
function CreatePopulateDataSet() {
//*************************************************************************
//Company/Division/SubCat/Plan dataset populate - BEGIN********************
//*************************************************************************
var g_CompanyList = {};
var g_DivisionList = {};
var g_SubCatList = {};
try {
if ($("#selCompanyList").find("option").length > 0) {
try {
$("#selCompanyList option").each(function () {
var Comp = $(this).text().split("|")[0];
var Div = $(this).text().split("|")[1];
var SubCat = $(this).text().split("|")[2];
var Plant = $(this).text().split("|")[3];
var CompList = g_CompanyList[Comp];
var DivList = g_DivisionList[Comp + Div];
var SubList = g_SubCatList[Comp + Div + SubCat];
try {
if (hasCompanyAccess(Comp)) {
if (!CompList) { CompList = new Array(); }
if ($.inArray(Div, CompList) == -1) {
CompList.push(Div);
g_CompanyList[Comp] = CompList;
}
if (!DivList) { DivList = new Array(); }
if (SubCat != null) {
if ($.inArray(SubCat, DivList) == -1) {
DivList.push(SubCat);
g_DivisionList[Comp + Div] = DivList;
}
}
if (!SubList) { SubList = new Array(); }
if (Plant != null) {
if ($.inArray(Plant, SubList) == -1) {
SubList.push(Plant);
g_SubCatList[Comp + Div + SubCat] = SubList;
}
}
}
}
catch (err) {
alert("Unable build global lists used to populate drop downs. " + err);
}
});
}
catch (err) {
alert(err);
}
$("#selPARCompany").html("<option value=''>Please Select...</option>");
for (var Comp in g_CompanyList) {
$("#selPARCompany").append("<option value='" + Comp + "'>" + Comp + "</option>");
}
$("#selPARCompany").addClass("fullwidth");
//Cascade Reload - BEGIN
//Re-loads/populates the cascading data set if the form has been submitted.
if ($("#OBPropertyItemNum").val()) {
//re-sets the Company drop down box on load of a submitted form.
var tempComp = $("#txtPARCompany").val();
$("#selPARCompany option").each(function () {
if ($(this).text().toUpperCase() == tempComp.toUpperCase()) {
$(this).attr("selected", "selected");
}
});
//Calls the CompanyTabOverride method to set access to the corrct tabs based on the saved value.
CompanyTabOverride(tempComp);
var CompList = g_CompanyList[$("#selPARCompany option:selected").text().toUpperCase()];
var tempDiv = $("#txtPARDivision").val();
//re-load and populate the Division drop down box
for (var i = 0; i < CompList.length; i++) {
if (i == 0)
$("#selPARDivision").html("<option value=''>Please Select...</option>");
if (CompList[i].toUpperCase() == tempDiv.toUpperCase()) {
$("#selPARDivision").append("<option selected=selected label='" + CompList[i] + "' value='" + CompList[i] + "'>" + tempComp + CompList[i] + "</option>");
} else {
$("#selPARDivision").append("<option label='" + CompList[i] + "' value='" + CompList[i] + "'>" + tempComp + CompList[i] + "</option>");
}
}
if ($("#selPARDivision option").length > 1) {
$("#selPARDivision").closest("td").show();
$("#selPARDivision").addClass("required");
} else {
$("#selPARDivision").closest("td").hide();
$("#selPARDivision").removeClass("required");
$("#selPARDivision").removeClass("requiredInput");
}
DivisionTabOverride(tempComp, tempDiv);
//re-load and populate the Sub Category drop down box
var tempSubCat = $("#txtPARSubCat").val();
var DivList = g_DivisionList[$("#selPARDivision option:selected").text().toUpperCase()];
var Div = $("#selPARDivision option:selected").html();
if (tempSubCat != "") {
for (var i = 0; i < DivList.length; i++) {
if (i == 0)
$("#selPARSubCat").html("<option value=''>Please Select...</option>");
if (DivList[i].toUpperCase() == tempSubCat.toUpperCase()) {
$("#selPARSubCat").append("<option selected=selected label='" + DivList[i] + "' value='" + DivList[i] + "'>" + Div + DivList[i] + "</option>");
} else {
$("#selPARSubCat").append("<option label='" + DivList[i] + "' value='" + DivList[i] + "'>" + Div + DivList[i] + "</option>");
}
}
if ($("#selPARSubCat option").length > 1) {
$("#selPARSubCat").closest("td").show();
$("#selPARSubCat").addClass("required");
} else {
$("#selPARSubCat").closest("td").hide();
$("#selPARSubCat").removeClass("required");
$("#selPARSubCat").removeClass("requiredInput");
}
}
//re-load and populate the Plant drop down box.
var tempPlant = $("#txtPARPlant").val();
var SubList = g_SubCatList[$("#selPARSubCat option:selected").text().toUpperCase()];
var SubCat = $("#selPARSubCat option:selected").html();
if (tempPlant != "") {
for (var i = 0; i < SubList.length; i++) {
if (i == 0)
$("#selPARPlant").html("<option value=''>Please Select...</option>");
if (SubList[i].toUpperCase() == tempPlant.toUpperCase()) {
$("#selPARPlant").append("<option selected=selected label='" + SubList[i] + "' value='" + SubList[i] + "'>" + SubCat + SubList[i] + "</option>");
} else {
$("#selPARPlant").append("<option label='" + SubList[i] + "' value='" + SubList[i] + "'>" + SubCat + SubList[i] + "</option>");
}
}
if ($("#selPARPlant option").length > 1) {
$("#selPARPlant").closest("td").show();
$("#selPARPlant").addClass("required");
} else {
$("#selPARPlant").closest("td").hide();
$("#selPARPlant").removeClass("required");
$("#selPARPlant").removeClass("requiredInput");
}
}
}
//Cascade Reload - END
try {
$("#selPARCompany").bind("change", function () {
var Comp = $(this).val();
$("#selPARDivision").html("<option value=''>Please Select...</option>");
$("#txtPARDivision").val("");
$("#selPARSubCat").html("<option value=''>Please Select...</option>");
$("#txtPARSubCat").val("");
$("#selPARPlant").html("<option value=''>Please Select...</option>");
$("#txtPARPlant").val("");
if ($(this)[0].selectedIndex > 0) {
var CompList = g_CompanyList[Comp];
for (var i = 0; i < CompList.length; i++) {
//$("#selPARDivision").append("<option value='" + Comp + CompList[i] + "'>" + CompList[i] + "</option>");
$("#selPARDivision").append("<option label='" + CompList[i] + "' value='" + CompList[i] + "'>" + Comp + CompList[i] + "</option>");
}
}
$("#selPARDivision").addClass("fullwidth");
$("#txtPARCompany").val($("#selPARCompany").val());
if ($("#selPARDivision option").length > 1) {
$("#selPARDivision").closest("td").show();
$("#selPARDivision").addClass("required");
$("#selPARSubCat").closest("td").hide();
$("#selPARSubCat").removeClass("required");
$("#selPARSubCat").removeClass("requiredInput");
$("#selPARPlant").closest("td").hide();
$("#selPARPlant").removeClass("required");
$("#selPARPlant").removeClass("requiredInput");
} else {
$("#selPARDivision").closest("td").hide();
$("#selPARDivision").removeClass("required");
$("#selPARDivision").removeClass("requiredInput");
$("#selPARSubCat").closest("td").hide();
$("#selPARSubCat").removeClass("required");
$("#selPARSubCat").removeClass("requiredInput");
$("#selPARPlant").closest("td").hide();
$("#selPARPlant").removeClass("required");
$("#selPARPlant").removeClass("requiredInput");
}
CompanyTabOverride(Comp);
IsEngineeringLevelRequired(Comp);
IsUniqPlanIDRequired(Comp, $('#selPARExpenditureinBusinessPlan').find(":selected").text());
//$('#selPARExpenditureinBusinessPlan').change();
});
$("#selPARDivision").bind("change", function () {
var Div = $("#" + $(this).attr("id") + " option:selected").html();
$("#selPARSubCat").html("<option value=''>Please Select...</option>");
$("#txtPARSubCat").val("");
$("#selPARPlant").html("<option value=''>Please Select...</option>");
$("#txtPARPlant").val("");
if ($(this)[0].selectedIndex > 0) {
var DivList = g_DivisionList[Div];
if (DivList) {
for (var i = 0; i < DivList.length; i++) {
//$("#selPARSubCat").append("<option value='" + Div + DivList[i] + "'>" + DivList[i] + "</option>");
$("#selPARSubCat").append("<option label='" + DivList[i] + "' value='" + DivList[i] + "'>" + Div + DivList[i] + "</option>");
}
}
}
$("#selPARSubCat").addClass("fullwidth");
$("#txtPARDivision").val($("#selPARDivision").val());
if ($("#selPARSubCat option").length > 1) {
$("#selPARSubCat").closest("td").show();
$("#selPARSubCat").addClass("required");
$("#selPARPlant").closest("td").hide();
$("#selPARPlant").removeClass("required");
$("#selPARPlant").removeClass("requiredInput");
} else {
$("#selPARSubCat").closest("td").hide();
$("#selPARSubCat").removeClass("required");
$("#selPARSubCat").removeClass("requiredInput");
$("#selPARPlant").closest("td").hide();
$("#selPARPlant").removeClass("required");
$("#selPARPlant").removeClass("requiredInput");
}
DivisionTabOverride($("#selPARCompany").val(), $(this).val());
});
$("#selPARSubCat").bind("change", function () {
//var SubCat = $(this).val();
var SubCat = $("#" + $(this).attr("id") + " option:selected").html();
$("#selPARPlant").html("<option value=''>Please Select...</option>");
$("#txtPARPlant").val("");
if ($(this)[0].selectedIndex > 0) {
var SubList = g_SubCatList[SubCat];
if (SubList) {
for (var i = 0; i < SubList.length; i++) {
//$("#selPARPlant").append("<option value='" + SubCat + SubList[i] + "'>" + SubList[i] + "</option>");
$("#selPARPlant").append("<option label='" + SubList[i] + "' value='" + SubList[i] + "'>" + SubCat + SubList[i] + "</option>");
}
}
}
$("#selPARPlant").addClass("fullwidth");
$("#txtPARSubCat").val($("#selPARSubCat").val());
if ($("#selPARPlant option").length > 1) {
$("#selPARPlant").closest("td").show();
$("#selPARPlant").addClass("required");
} else {
$("#selPARPlant").closest("td").hide();
$("#selPARPlant").removeClass("required");
$("#selPARPlant").removeClass("requiredInput");
}
});
$("#selPARPlant").bind("change", function () {
$("#txtPARPlant").val($("#selPARPlant").val());
});
}
catch (err) {
alert("loadForm: if GroupDocList>0: bind Group Change:" + err);
}
}
}
catch (err) {
alert("loadForm: if GroupDocList>0: " + err);
}

how to move the table row data (HTML) from one php page to another

// searching the country to select(js file)
function search_country(){
d3.csv("data/totalpopulation.csv", function(data) {
var v=f1.search.value;
for(var i=0;i<data.length;i++){
if(data[i].Name==v){
document.getElementById('tablediv').style.visibility="visible";
// retrun value
document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>";
}
}
});
}
// Comparing the Selected Countries
function compare(){
window.location.href='country.php';
}
Here, I am selecting the countries from search bar and putting in CompareTable.
Furthur, On clicking a compare button i should move to next php file (country.php) and carry the same table data to compare them.
document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>";

Use an arrya to store the complete tr values
var data_arr[];
function search_country(){
d3.csv("data/totalpopulation.csv", function(data) {
var v=f1.search.value;
for(var i=0;i<data.length;i++){
if(data[i].Name==v){
document.getElementById('tablediv').style.visibility="visible";
// push value to an object.
data_arr.push(document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>");
}
}
});
}
// Comparing the Selected Countries
function compare(){
data_arr_json = JSON.stringify(data_arr);
window.location.href='country.php?data='+data_arr_json;
}
When you want to get the data of array in country.php:
$data_from_url = json_decode($_GET['data']);

Unable to loop through JSON Data [duplicate]

This question already has answers here:
I keep getting "Uncaught SyntaxError: Unexpected token o"
(9 answers)
Closed 7 years ago.
I have the following Json data (Please see the image). I am trying to extract the data using the below jQuery code and it's not working. Please help.
var items = [];
$.each($.parseJSON(OnePointData), function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(key, function(key2, val2) {
items.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items);
Here is an image of my console:
And here is additional code from my implementation:
$.getJSON("/Home/GetOnePointData", { Address: ui.item.value },function(OnePointData) {
console.log(OnePointData);
var items = [];
var items2 = [];
$.each($.parseJSON(OnePointData), function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(key, function (key2, val2) {
items2.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items2);
});
If i run the loop once then i get the following result.
The data is in the following format:
{"GetQuestions":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"},
"GetQuestions2":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"}}

As #Barmar says $.getJSON calls $.parseJSON automatically. So, just try removing $.parseJSON function:
$.getJSON("/Home/GetOnePointData", { Address: ui.item.value}, function(OnePointData) {
console.log(OnePointData);
var items = [];
var items2 = [];
$.each(OnePointData, function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(val, function (key2, val2) {
items2.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items2);
});
This is an example using data structure posted by you and it works.
var OnePointData = {"GetQuestions":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"},
"GetQuestions2":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"}};
var items = [];
var items2 = [];
$.each(OnePointData, function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(val, function (key2, val2) {
items2.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items);
console.log(items2);
Output:
["<li id='GetQuestions'>[object Object]</li>", "<li id='GetQuestions2'>[object Object]</li>"]
["<li id='s1'>Q1,Q2</li>", "<li id='s2'>Q1,Q2,Q3</li>", "<li id='s3'>Q1,Q2,Q4</li>", "<li id='s4'>Q1,Q2,Q4,Q6</li>", "<li id='s1'>Q1,Q2</li>", "<li id='s2'>Q1,Q2,Q3</li>", "<li id='s3'>Q1,Q2,Q4</li>", "<li id='s4'>Q1,Q2,Q4,Q6</li>"]

Edit HTML table and capture changes as POST using Javascript

I just started off with javascript and html, so please correct me if I am doing it the wrong way. I was trying to edit an html form table.
{%extends 'base.html'%}
{%block content%}
<html>
<body>
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<form id="update" action="/update/" method="POST">
<script>
function onEdit(btn)
{
var id=btn.id;
if(btn.value=="Edit") {
var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //This will be the json value returned by django view
{% endautoescape %}
text = ''
var out = "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
document.getElementById("data").innerHTML = out
</script>
<input type="submit" value="Submit">
</form>
I have the page displayed as expected.
What I am trying to achieve is to make these html tables editable, which is also working half way. When I click the Edit button, the table link turns editable, and I can change the value, and the Edit button changes to Save.
But when I click on "Save" button, firebug error shows
TypeError: input is undefined
for(i = 0;i < input.length; i++) {
----------↑
(Yes, arrow points to var i)
I want to capture the changes when I click on Save, and whatever changes in that page should be captured via POST method once clicked on the submit button below. Submit is redirected to action="/update/". Please let me know what should I do.

to avoid such problems please define all variables at the beginning of their scope (the scope is a function in case of Javascript)

Building HTML table in javascript, getting "ReferenceError: invalid assignment left-hand side"

I hope someone can help me out with this. I'm trying to dynamically build an HTML table in javascript/jquery based on iterating over an array built by earlier code. I am getting an error on the referenced line below as soon as the page loads:
function BuildForm (allFields) {
var dyndata = "";
var formstart = "<form>\n<fieldset class='fieldset-js'>\n<legend>Choose A Parent</legend>\n<table class='table-js'>\n<tr>\n<th class='th'>ID</th>\n<th class='th'>Name</th>\n<th class='th'>DOB</th>\n<th class='th'>Phone</th>\n</tr>\n<tr>";
$('#PickAParent-Form').append(formstart);
$.each(allFields, function (index, value) {
if ((index + 5) % 5 == 0) {
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" = index + "'>" + value + "</td>\n";
error here---------^
$('#PickAParent-Form').append(dyndata);
} elseif ((index +1 ) % 5 == 0) {
dyndata = "<td class='td1'>" + value + "</td>\n</tr>\n";
$('#PickAParent-Form').append(dyndata);
} else {
dyndata = "<td class='td1'>" + value + "</td>\n";
$('#PickAParent-Form').append(dyndata);
}
});
DisplayForm;
}
I have been all over Google and SO this AM but can't figure this one out. Any help is MUCH appreciated!!

This line:
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" = index + "'>" + value + "</td>\n";
should be:
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" + index + "'>" + value + "</td>\n";
Looks like you had an equals sign instead of a plus sign for variable to string conversion

Change it to:
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" + index + "'>" + value + "</td>\n";
Note:
value='" + index + "'
Instead of:
value='" = index + "'