Problem with loading XML with JS

**Chinmayo** · Aug 8, 2007, 02:46

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;
	}

Part of the XML file is displayed here under:

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>

Much obliged if anyone can help me!!!

**gRoberts** · Aug 8, 2007, 05:23

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

using

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>

I have put in a function that loads the XML so remember to take that out if its not needed.

**Chinmayo** · Aug 8, 2007, 06:20

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

**gRoberts** · Aug 8, 2007, 06:30

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 />';

NameOfRelatedThought is undefined for that item.

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.

**Chinmayo** · Aug 8, 2007, 07:07

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!!!!

**gRoberts** · Aug 8, 2007, 07:45

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 />';
    }
}

**Chinmayo** · Aug 8, 2007, 07:46

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

**Chinmayo** · Aug 8, 2007, 07:47

Just saw your reply. Will investigate...

**gRoberts** · Aug 8, 2007, 07:48

sorry double post.

**Chinmayo** · Aug 8, 2007, 08:03

I don't think there is any whitespace in this:

Code:

<personal-brain><thought id="1"><name>Home</name><location>http&#58;//www.wideopenwin.com</location><relations><child id="2"/><jump id="3"/></relations></thought><thought id="2"><name>Kindje</name><location>http&#58;//www.pantha.net</location><relations><parent id="1"/></relations></thought><thought id="3"><name>Sprong</name><location>http&#58;//www.google.com</location><relations><jump id="1"/></relations></thought></personal-brain>

Still it doesnt work in FF...

**Chinmayo** · Aug 8, 2007, 08:27

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

**gRoberts** · Aug 8, 2007, 08:54

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;
        }

**Chinmayo** · Aug 8, 2007, 10:26

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!!!

**Chinmayo** · Aug 8, 2007, 10:40

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...

**gRoberts** · Aug 8, 2007, 10:45

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.

**gRoberts** · Aug 8, 2007, 11:00

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.

**Chinmayo** · Aug 8, 2007, 13:37

No, it doesn't work without the location.relaod. The URL in the address bar looks very weird then:

Code:

/index.html#5&#37;3EFlashBrain%3C/a%3E%3Cbr%20/%3E%3Ca%20href=

the link to the address 'index.html#5' should load thought id=5 into the main div immediately, but it doesn't...

**gRoberts** · Aug 8, 2007, 13:51

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>

?

**Chinmayo** · Aug 9, 2007, 22:24

That works like a charm!!! Thanks a lot!

The SitePoint Forums have moved.

User Tag List

Thread: Problem with loading XML with JS

Thread Tools

Display

Problem with loading XML with JS

Bookmarks

Bookmarks

Posting Permissions