I am using JS to load nodes of an XML file into HTML div's. The code works perfectly in IE, but not in other browsers. In FF for instance I get the following error: relatedthought.getAttribute is not a function. The XML file loads in all browsers, so I skip that part from repeating here. The important part of the code is the function quest(). It should fill a div#main with the value of the nodes named 'thought'. This works, but it should also fill certain div's with the values of nodes named 'child', 'parent' and 'jump'. And this does not work. Here is the function quest(): function quest(xmlDoc) { var notWhitespace = /\S/ var x=xmlDoc.getElementsByTagName("thought")[0] for (i=0;i<x.childNodes.length;i++){ if ((x.childNodes[i].nodeType == 3) && (!notWhitespace.test(x.childNodes[i].nodeValue))) { x.removeChild(x.childNodes[i]) i-- } } var myID = 0; var StringA=document.URL; var LengthA=StringA.length var A=StringA.lastIndexOf("#")+1; var ThisAnchor = '' if (A == 0) { } else { ThisAnchor=StringA.substring(A,LengthA); } if (ThisAnchor.length == 0) { myID = 1; } else { myID = ThisAnchor; } var Thoughts = xmlDoc.getElementsByTagName("thought"); for (i=0; i<Thoughts.length; i++) { if (Thoughts.item(i).getAttribute("id") == myID) { var MainThought = Thoughts.item(i) } } //var NameOfMainThought = MainThought.getElementsByTagName("name").item(0).text var NameOfMainThought = MainThought.getElementsByTagName("name").item(0).firstChild.nodeValue if (MainThought.getElementsByTagName("location").length>0) { //var LocationOfMainThought = MainThought.getElementsByTagName("location").item(0).text var LocationOfMainThought = MainThought.getElementsByTagName("location").item(0).firstChild.nodeValue document.getElementById("main").innerHTML='<a href="#" onclick="popUp(\'' + LocationOfMainThought + '\')">' + NameOfMainThought +'</a>' } else { document.getElementById("main").innerHTML= NameOfMainThought } var RelatedThoughts = MainThought.getElementsByTagName("relations").item(0).childNodes; var childrenHtml = ""; var jumpsHtml = ""; var parentsHtml = ""; for (i=0; i<RelatedThoughts.length; i++){ var relatedthought = RelatedThoughts.item(i) var IdOfRelatedThought=relatedthought.getAttribute('id') if (relatedthought.childNodes && relatedthought.childNodes.length>0) { var NameOfRelatedThought=relatedthought.getElementsByTagName("name").item(0).text; } else { for (j=0; j<Thoughts.length; j++) { if (Thoughts.item(j).getAttribute("id") == IdOfRelatedThought) { var NameOfRelatedThought=Thoughts.item(j).getElementsByTagName("name").item(0).text; } } } var HrefOfRelatedThought = '<a href="index.html#'+ IdOfRelatedThought + '" onclick="window.location.reload()">' + NameOfRelatedThought + '</a>' if (relatedthought.nodeName == "child") childrenHtml+=HrefOfRelatedThought + '<br />'; if (relatedthought.nodeName == "jump") jumpsHtml+=HrefOfRelatedThought + '<br />'; if (relatedthought.nodeName == "parent") parentsHtml+=HrefOfRelatedThought + '<br />'; } document.getElementById("children").innerHTML=childrenHtml; document.getElementById("jumps").innerHTML=jumpsHtml; document.getElementById("parents").innerHTML=parentsHtml; } Code (markup): Part of the XML file is displayed here under: <?xml version = "1.0" encoding = "UTF-8" ?> <personal-brain> <thought id = "1"> <name>Home</name> <location>http://www.wideopenwin.com</location> <relations> <child id = "5"/> <child id = "93"/> <child id = "102"/> <child id = "27"/> <child id = "34"/> <child id = "14"/> <child id = "81"/> <child id = "7"/> <child id = "44"/> <jump id = "3"/> <jump id = "2"/> <jump id = "16"/> <jump id = "61"/> <jump id = "8"/> <jump id = "78"/> </relations> </thought> <thought id = "2"> <name>MindMapping</name> <relations> <child id = "56"/> <child id = "57"/> <child id = "10"/> <child id = "62"/> <child id = "100"/> <child id = "101"/> <child id = "54"/> <child id = "63"/> <child id = "18"/> <child id = "14"/> <child id = "67"/> <child id = "61"/> <child id = "68"/> <child id = "69"/> <jump id = "1"/> </relations> </thought> Code (markup): Much obliged if anyone can help me!!!
I copied your sample xml and saved it as testing.xml. Then I attempted to open it in Firefox. As I suspected, it's not well formed. This error is displayed in FF: XML Parsing Error: no element found Location: file:///C:/Documents%20and%20Settings/Administrator/Desktop/Script%20Archive/Crap.xml Line Number 43, Column 11:</thought> ----------^ I then changed the xml to this: <?xml version = "1.0" encoding = "UTF-8" ?> <personal-brain> <thought id = "1"> <name>Home</name> <location>http://www.wideopenwin.com</location> <relations> <child id = "5"></child> <jump id = "3"></jump> </relations> </thought> <thought id = "2"> <name>MindMapping</name> <relations> <child id = "56"></child> <jump id = "1"></jump> </relations> </thought> </personal-brain> Code (markup): and it opens fine in Firefox. Your JavaScript is a convoluted mess. You shouldn't need much more than the getElementsByTagName method, then stepping through the array that it returns: var childID = []; var jumpID = []; var children = xmlObj.getElementsByTagName('child'); var jumps = xmlObj.getElementsByTagName('jump'); for (i=0; i<children.length; i++) { childID[i] = children[i].getAttribute('id'); } Code (markup): The above should put all the child tag ID values in an array named childID.
Yup, i didn't write the JS, nor the XML, and i am not so good at this DOM parsing stuff. Very confusing! Anyway, thanks for the snippet!