SitePoint Sponsor |
|
User Tag List
Results 1 to 19 of 19
Thread: Problem with loading XML with JS
-
Aug 8, 2007, 03:46 #1
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Problem with loading XML with JS
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.
Live on http://www.pantha.net/Old/JSBrain/index2.html
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():
Code: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:<?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>
-
Aug 8, 2007, 06:23 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have managed to get the following:
Code:Main Home Children undefined undefined undefined undefined undefined undefined undefined undefined undefined Jumps undefined MindMapping MindMapping MindMapping MindMapping MindMapping Parents
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"></style> <script type="text/javascript"> function quest(data) { var xmlDoc = loadXML(data); 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[i].getAttribute("id") == myID) { var MainThought = Thoughts[i]; } } //var NameOfMainThought = MainThought.getElementsByTagName("name").item(0).text var NameOfMainThought = MainThought.getElementsByTagName("name")[0].firstChild.nodeValue; if (MainThought.getElementsByTagName("location").length>0) { //var LocationOfMainThought = MainThought.getElementsByTagName("location").item(0).text var LocationOfMainThought = MainThought.getElementsByTagName("location")[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")[0].childNodes; var childrenHtml = ""; var jumpsHtml = ""; var parentsHtml = ""; for (i=0; i<RelatedThoughts.length; i++){ var relatedthought = RelatedThoughts[i]; var IdOfRelatedThought = relatedthought.getAttribute('id'); if (relatedthought.childNodes && relatedthought.childNodes.length>0) { var NameOfRelatedThought = relatedthought.getElementsByTagName("name")[0].nodeValue; } else { for (j=0; j<Thoughts.length; j++) { if (Thoughts.item(j).getAttribute("id") == IdOfRelatedThought) { alert(Thoughts[j].getElementsByTagName("name")[0].text); var NameOfRelatedThought = Thoughts[j].getElementsByTagName("name")[0].text; } } } var HrefOfRelatedThought = '<a href="index.html#'+ IdOfRelatedThought + '" onclick="window.location.reload()">' + NameOfRelatedThought + '</a>'; alert(relatedthought.nodeName); 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; } function loadXML(text) { var xmlDoc = ""; // code for IE if (window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } else if (document.implementation && document.implementation.createDocument) { var parser=new DOMParser(); var xmlDoc=parser.parseFromString(text,"text/xml"); } else { alert('Your browser cannot handle this script'); } return xmlDoc; } window.onload = function() { quest('<?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></personal-brain>'); }; </script> </head> <body> Main <div id="main"></div> Children <div id="children"></div> Jumps <div id="jumps"></div> Parents <div id="parents"></div> </body> </html>
-
Aug 8, 2007, 07:20 #3
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for investigating, but i keep having this 'undefined' values too, when i use your script and my own files...So something is still wrong. If you would like to have another look then i could send you a zip with all the files...You can also look online on http://www.pantha.net/Old/JSbrain/index2.html
-
Aug 8, 2007, 07:30 #4
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
error 404 on your link mate.
As for the undefined, if you look correctly, NameOfRelatedThought is looking in the Child Elements (<child id=56> ...) for a name Attribute, which is not present, so when you loop through and hit this line
Code:if (relatedthought.nodeName == "child") childrenHtml+=HrefOfRelatedThought + '<br />';
If you wish to send me a zip file, please use Rapidshare.com, select browse, select the file and then upload. Once its complete you will see a link at the bottom saying "I don't want a collector's account right now. Just give me the download-link." click that and copy and paste both URLs into a PM for me.
I will delete the file once I have downloaded it.
-
Aug 8, 2007, 08:07 #5
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oops, sorry, the link should be http://www.pantha.net/Old/JSBrain/index2.html
i will look into this name Attribute stuff and upload a zip to Rapidshare.com
Thanks again!!!!
-
Aug 8, 2007, 08:45 #6
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok I think i may of found the problem.
Using Firebug, I was able to see what was in RelatedThoughts, and it could be causing the issue.
Code:["\n", child, "\n", child, "\n", child, "\n", child, "\n", child, "\n", child, "\n", child, "\n", child, "\n", child, "\n", jump, "\n", jump, "\n", jump, "\n", jump, "\n", jump, "\n", jump, "\n"]
Where as I assume IE will only have the child and jump elements in.
You can either try and clear any whitespace that may be present or check to see if its the correct nodeType.
Code:for (i=0; i<RelatedThoughts.length; i++){ if(RelatedThoughts.item(i).noteType != 3) { 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 />'; } }
-
Aug 8, 2007, 08:46 #7
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The funny thing is, also your code, like mine, works perfectly in IE!!
see http://www.pantha.net/Old/JSBrain/index3.html
I have simplified the xml part a bit
-
Aug 8, 2007, 08:47 #8
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just saw your reply. Will investigate...
-
Aug 8, 2007, 08:48 #9
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sorry double post.
-
Aug 8, 2007, 09:03 #10
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't think there is any whitespace in this:
Code:<personal-brain><thought id="1"><name>Home</name><location>http://www.wideopenwin.com</location><relations><child id="2"/><jump id="3"/></relations></thought><thought id="2"><name>Kindje</name><location>http://www.pantha.net</location><relations><parent id="1"/></relations></thought><thought id="3"><name>Sprong</name><location>http://www.google.com</location><relations><jump id="1"/></relations></thought></personal-brain>
Still it doesnt work in FF...
-
Aug 8, 2007, 09:27 #11
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
here are the url's of the zip:
Your Download-Link #1: http://rapidshare.com/files/47740693/JSBrain.zip.html
Your Delete-Link #1: http://rapidshare.com/files/47740693...16737268778456
-
Aug 8, 2007, 09:54 #12
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
right I have sorted it (phew)
Code: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[i].getAttribute("id") == myID) { var MainThought = Thoughts[i]; } } //var NameOfMainThought = MainThought.getElementsByTagName("name").item(0).text var NameOfMainThought = MainThought.getElementsByTagName("name")[0].firstChild.nodeValue; if (MainThought.getElementsByTagName("location").length>0) { //var LocationOfMainThought = MainThought.getElementsByTagName("location").item(0).text var LocationOfMainThought = MainThought.getElementsByTagName("location")[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")[0].childNodes; var childrenHtml = ""; var jumpsHtml = ""; var parentsHtml = ""; for (i=0; i<RelatedThoughts.length; i++){ if(getValue(RelatedThoughts[i]) != '\n') { var relatedthought = RelatedThoughts[i]; var IdOfRelatedThought = relatedthought.getAttribute('id'); if (relatedthought.childNodes && relatedthought.childNodes.length>0) { var NameOfRelatedThought = getValue(relatedthought.getElementsByTagName("name")[0].firstChild); } else { for (j=0; j<Thoughts.length; j++) { if (Thoughts.item(j).getAttribute("id") == IdOfRelatedThought) { var NameOfRelatedThought = getValue(Thoughts.item(j).getElementsByTagName("name")[0].firstChild); } } } var HrefOfRelatedThought = '<a href="index.html#'+ IdOfRelatedThought + '" onclick="window.location.reload()">' + NameOfRelatedThought + '</a>'; alert(relatedthought.nodeName); 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; } function getValue(el) { if(el.nodeValue) return el.nodeValue; else return el.text; }
-
Aug 8, 2007, 11:26 #13
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes! it works!
Only one small problem: you have to click twice on a child/parent/jump link to load that node in the main div. That is, with FF. With IE it works as it should work...Do you know why?
http://www.pantha.net/Old/JSBrain/index.html
Anyway, I want to thank you for getting so close!!!
-
Aug 8, 2007, 11:40 #14
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hm, that's probably due to the onclick event function window.location.reload(), that works differently in IE and FF. Opera reacts weird too when clicking the links...
-
Aug 8, 2007, 11:45 #15
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think the onclick handler is being called before the href.
Although I saw what you meant at first, it seems to have fixed its self for me now.
-
Aug 8, 2007, 12:00 #16
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've found that the main Child links work fine on first click, but when the new data is shown, it takes two clicks.
As above I think its due to the a href actioning, and then the location.reload refreshing the old url for some reason. Does it not work without the location.reload? I can't test it at home for some reason.
-
Aug 8, 2007, 14:37 #17
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No, it doesn't work without the location.relaod. The URL in the address bar looks very weird then:
Code:/index.html#5%3EFlashBrain%3C/a%3E%3Cbr%20/%3E%3Ca%20href=
-
Aug 8, 2007, 14:51 #18
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
since the whole page wont work without Javascript, could it not be worth changing reload for a custom function that changes the url to the anchor value?
ie
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"></style> <script type="text/javascript"> function loadAnchor(id) { window.location = (window.location.href.indexOf('#') > -1) ? window.location.href.split('#')[0] + '#' + id : window.location + '#' + id; window.location.reload(); } </script> </head> <body> <a onclick="loadAnchor(2)">2</a> <a onclick="loadAnchor(3)">3</a> <a onclick="loadAnchor(4)">4</a> <a onclick="loadAnchor(5)">5</a> <a onclick="loadAnchor(6)">6</a> <a onclick="loadAnchor(7)">7</a> <a onclick="loadAnchor(8)">8</a> <a onclick="loadAnchor(9)">9</a> </body> </html>
-
Aug 9, 2007, 23:24 #19
- Join Date
- Aug 2007
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That works like a charm!!! Thanks a lot!
Bookmarks