Getting the error: Failed to execute 'appendChild' on 'Node' - javascript

Am using pure javascript prototype functions to create a list of checkbox and append them as we iterate over the data. Everything is created using javascript and css.
When I run it so it can draw a list of checkboxes, it throws me an error :
"Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."
for this line:
results.push(this.list.appendChild(letter.draw));
Am sure there is nothing wrong with checkboxinput prototype since it works fine everywhere else. There is something wrong am doing in FormTicket.Can anyone help me what am doing wrong?
The form page is FormTicket
FormTicket.prototype.respond = function(data) {
var letter, i, len;
this.letters = [];
for (i = 0, len = data.length; i < len; i++) {
letter = data[i];
this.letters.push(new ParaInfo({
InfoIndividual: letter
}));
}
return this.drawList();
};
FormTicket.prototype.drawList = function() {
var letter, i, len, ref, results;
ref = this.letters;
results = [];
for (i = 0, len = ref.length; i < len; i++) {
letter = ref[i];
results.push(this.list.appendChild(letter.draw));
}
return results;
};
The draw function in the ParaInfo method is:
ParaInfo.prototype.draw = function() {
this.e = new CheckBoxInput({
title: this.InfoIndividual,
float: 'left',
});
return this.e;
};
and just FYI, the checkboxinput is another prototype, part of it as below:
CheckBoxInput.prototype.build = function(arg) {
this.title = arg.title;
this.float = arg.float;
};
CheckBoxInput.prototype.draw = function() {
var box, check;
this.item = document.createElement('div').addClass('checkboxInput');
return this.item;
};


Solved it. needed to call ".draw().draw()"
i.e Initially was calling .draw() of ParaInfo only. Added another ".draw()" which calls the draw of CheckBoxInput. Correct call for append:
results.push(this.list.appendChild(letter.draw().draw()));
Thanks to user apsillers for his valuable input as well.

Related

Cannot read property 'enumNodeFragments' of undefined

I'm trying to change the color of elements in 3D Viewer using the Autodesk-forge platform, and for this I'm using this API https://forge.autodesk.com/cloud_and_mobile/2015/12/change-color-of-elements-with-view-and-data-api.html by Daniel Du.
But the problem is when running I got this
The error Pict
And this the function :
Autodesk.Viewing.Viewer3D.prototype.setColorMaterial = function(objectIds, color) {
var material = addMaterial(color);
for (var i=0; i<objectIds.length; i++) {
var dbid = objectIds[i];
//from dbid to node, to fragid
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
var it = viewer.model.getData().instanceTree;
console.log(it);
it.enumNodeFragments(dbid, function (fragId) {
var renderProxy = viewer.impl.getRenderProxy(viewer.model, fragId);
console.log("r prox : " + renderProxy);
renderProxy.meshProxy = new THREE.Mesh(renderProxy.geometry, renderProxy.material);
renderProxy.meshProxy.matrix.copy(renderProxy.matrixWorld);
renderProxy.meshProxy.matrixWorldNeedsUpdate = true;
renderProxy.meshProxy.matrixAutoUpdate = false;
renderProxy.meshProxy.frustumCulled = false;
viewer.impl.addOverlay(overlayName, renderProxy.meshProxy);
viewer.impl.invalidate(true);
}, false);
});
}
}
Hopefully, anyone has the solution to this problem...

Most likely you are running this code before the instance tree has been loaded, which provokes the error Cannot read property 'enumNodeFragments' of undefined on it variable. You would need to wait for the Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT before running that code.
Take also a look at previous question about modifying materials in the viewer.

Javascript array shows in console, but i cant access any properties in loops

I really try my damndest not to ask, but i have to at this point before I tear my hair out.
By the time the js interpreter gets to this particular method, I can print it to the console no problem, it is an array of "event" objects. From FireBug I can see it, but when I try to set a loop to do anything with this array its as if it doesn't exist. I am absolutely baffled......
A few things:
I am a newbie, I have tried a for(var index in list) loop, to no avail, I have also tried a regular old for(var i = 0; i < listIn.length; i++), and I also tried to get the size of the local variable by setting var size = listIn.length.
As soon as I try to loop through it I get nothing, but I can access all the objects inside it from the FireBug console no problem. Please help, even just giving me a little hint on where I should be looking would be great.
As for the array itself, I have no problems with getting an array back from PHP in the form of: [{"Event_Id":"9", "Title":"none"}, etc etc ]
Here is my code from my main launcher JavaScript file. I will also post a sample of the JSON data that is returned. I fear that I may be overextending myself by creating a massive object in the first place called content, which is meant to hold properties such as DOM strings, settings, and common methods, but so far everything else is working.
The init() function is called when the body onload is called on the corresponding html page, and during the call to setAllEvents and setEventNavigation I am lost.
And just to add, I am trying to learn JavaScript fundamentals before I ever touch jQuery.
Thanks
var dom, S, M, currentArray, buttonArray, typesArray, topicsArray;
content = {
domElements: {},
settings: {
allContent: {},
urlList: {
allURL: "../PHP/getEventsListView.php",
typesURL: "../PHP/getTypes.php",
topicsURL: "../PHP/getTopics.php"
},
eventObjArray: [],
buttonObjArray: [],
eventTypesArray: [],
eventTopicsArray: []
},
methods: {
allCallBack: function (j) {
S.allContent = JSON.parse(j);
var list = S.allContent;
for (var index in list) {
var event = new Event(list[index]);
S.eventObjArray.push(event);
}
},
topicsCallBack: function(j) {
S.eventTopicsArray = j;
var list = JSON.parse(S.eventTopicsArray);
topicsArray = list;
M.populateTopicsDropDown(list);
},
typesCallBack: function(j) {
S.eventTypesArray = j;
var list = JSON.parse(S.eventTypesArray);
typesArray = list;
M.populateTypesDropDown(list);
},
ajax: function (url, callback) {
getAjax(url, callback);
},
testList: function (listIn) {
// test method
},
setAllEvents: function (listIn) {
// HERE IS THE PROBLEM WITH THIS ARRAY
console.log("shall we?");
for(var index in listIn) {
console.log(listIn[index]);
}
},
getAllEvents: function () {
return currentArray;
},
setAllButtons: function (listIn) {
buttonArray = listIn;
},
getAllButtons: function () {
return buttonArray;
},
setEventNavigation: function(current) {
// SAME ISSUE AS ABOVE
var l = current.length;
//console.log("length " + l);
var counter = 0;
var endIndex = l - 1;
if (current.length < 4) {
switch (l) {
case 2:
var first = current[0];
var second = current[1];
first.setNextEvent(second);
second.setPreviousEvent(first);
break;
case 3:
var first = current[0];
var second = current[1];
var third = current[2];
first.setNextEvent(second);
second.setPreviousEvent(first);
second.setNextEvent(third);
third.setPreviousEvent(second);
break;
default:
break;
}
} else {
// do something
}
},
populateTopicsDropDown: function(listTopics) {
//console.log("inside topics drop");
//console.log(listTopics);
var topicsDropDown = document.getElementById("eventTopicListBox");
for(var index in listTopics) {
var op = document.createElement("option");
op.setAttribute("id", "dd" + index);
op.innerHTML = listTopics[index].Main_Topic;
topicsDropDown.appendChild(op);
}
},
populateTypesDropDown: function(listTypes) {
//console.log("inside types drodown");
//console.log(listTypes);
var typesDropDown = document.getElementById("eventTypeListBox");
for(var index2 in listTypes) {
var op2 = document.createElement("option");
op2.setAttribute("id", "dd2" + index2);
op2.innerHTML = listTypes[index2].Main_Type;
typesDropDown.appendChild(op2);
}
}
},
init: function() {
dom = this.domElements;
S = this.settings;
M = this.methods;
currentArray = S.eventObjArray;
buttonArray = S.buttonObjArray;
topicsArray = S.eventTopicsArray;
typesArray = S.eventTypesArray;
M.ajax(S.urlList.allURL, M.allCallBack);
//var tempList = currentArray;
//console.log("temp array length: " + tempList.length);
M.setAllEvents(currentArray);
M.testList(currentArray);
M.setEventNavigation(currentArray);
//M.setEventNavigation();
M.ajax(S.urlList.topicsURL, M.topicsCallBack);
M.ajax(S.urlList.typesURL, M.typesCallBack);
}
};

The problem you have is that currentArray gets its value asynchronously, which means you are calling setAllEvents too soon. At that moment the allCallBack function has not yet been executed. That happens only after the current running code has completed (until call stack becomes emtpy), and the ajax request triggers the callback.
So you should call setAllEvents and any other code that depends on currentArray only when the Ajax call has completed.
NB: The reason that it works in the console is that by the time you request the value from the console, the ajax call has already returned the response.
Without having looked at the rest of your code, and any other problems that it might have, this solves the issue you have:
init: function() {
dom = this.domElements;
S = this.settings;
M = this.methods;
currentArray = S.eventObjArray;
buttonArray = S.buttonObjArray;
topicsArray = S.eventTopicsArray;
typesArray = S.eventTypesArray;
M.ajax(S.urlList.allURL, function (j) {
// Note that all the rest of the code is moved in this call back
// function, so that it only executes when the Ajax response is
// available:
M.allCallBack(j);
//var tempList = currentArray;
//console.log("temp array length: " + tempList.length);
M.setAllEvents(currentArray);
M.testList(currentArray);
M.setEventNavigation(currentArray);
//M.setEventNavigation();
// Note that you will need to take care with the following asynchronous
// calls as well: their effect is only available when the Ajax
// callback is triggered:
M.ajax(S.urlList.topicsURL, M.topicsCallBack); //
M.ajax(S.urlList.typesURL, M.typesCallBack);
});
}

How can I fix this type mismatch error when calling JS from VBScript?

In the onclick event of an HTML button, I call this sub:
Sub SaveStuff(SQLQuery, DOMFieldID, ButtonId, ButtonColour)
dbConn.Execute SQLQuery
Call resetButtonColors(DOMFieldID)
Call changeButtonColor(ButtonId, ButtonColour)
End Sub
resetButtonColors and changeButtonColor are JS functions.
function resetButtonColors(groupName){
var elements = document.getElementsByName(groupName)
for (var i = 0; i < elements.length; i++)
{
elements[i].style.backgroundColor = "rgb(192,192,192)"
}
}
function changeButtonColor(btn, newColor){
var element = document.getElementById(btn);
element.style.backgroundColor = newColor
}
But I am getting a type mismatch error that I don't know how to fix. I tried to cast the values to string but didn't work.

Cannot add a condition shopping basket price rule, no options or dropdown magento backend

I have never come across this before, it works fine on both of the other two magento stores I manage.
This store has been running for over a year with no issues in the backend. However today for the first time, rather than a % discount, I tried to add a fixed one to find that there I cannot add an action. Regardless of browser that I use, clicking on 'ALL', 'TRUE' or the Green Plus does absolutely nothing - in other stores it works perfectly.
Magento V1.7.0.2
Screenshot here
This is the error:
TypeError: ({initialize:(function (parent, newChildUrl){
this.parent = $(parent);
this.newChildUrl = newChildUrl;
this.shownElement = null;
this.updateElement = null;
this.chooserSelectedItems = $H({});
this.readOnly = false;
var elems = this.parent.getElementsByClassName('rule-param');
for (var i=0; i<elems.length; i++) {
this.initParam(elems[i]);
}
}), setReadonly:(function (readonly){
this.readOnly = readonly;
var elems = this.parent.getElementsByClassName('rule-param-remove');
for (var i=0; i<elems.length; i++) {
var element = elems[i];
if (this.readOnly) {
element.hide();
} else {
element.show();
}
}
var elems = this.parent.getElementsByClassName('rule-param-new-child');
for (var i=0; i<elems.length; i++) {
var element = elems[i];
Google chrome inspector is showing:
Uncaught TypeError: object is not a function 7ae86150a079d1644bc06caeec8fc3ef.js:20556(anonymous function)

I had the same problem, and although I'm unsure of the source of the problem, it seems to be caused when js files are merged.
In System > Configuration > Developer
Set 'Merge JavaScript Files' to 'No'
Then you should be able to add the price conditions, then just re-merge once complete.

Javascript Array strange behavior. Global declaration is unable to hold value

I have the following code in one of my function. I have an array 'arr' which is working correctly when used inside if{}. But its now working when using outside it. Can anyone point me what I am missing.
function runQueries()
{
var arr = new Array;
db.transaction (function (transaction)
{
var sql = "SELECT * FROM incomecategory";
transaction.executeSql (sql, undefined,
function (transaction, result)
{
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var categoryname = row.categoryname;
arr[i] = categoryname;
}
//alert(arr[0]); // It works
}
else
{
}
}, error);
});
//alert (arr[0]); // It doesn't work.
}

It's asynchronous behavior. Your alert at the bottom of the code is probably executed before the database query.

Categories

Resources