SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    SitePoint Wizard gRoberts's Avatar
    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:

    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.


  3. #3
    SitePoint Member
    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

  4. #4
    SitePoint Wizard gRoberts's Avatar
    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 />';
    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.


  5. #5
    SitePoint Member
    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!!!!

  6. #6
    SitePoint Wizard gRoberts's Avatar
    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 />';
        }
    }


  7. #7
    SitePoint Member
    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

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just saw your reply. Will investigate...

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry double post.


  10. #10
    SitePoint Member
    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&#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...

  11. #11
    SitePoint Member
    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

  12. #12
    SitePoint Wizard gRoberts's Avatar
    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;
            }


  13. #13
    SitePoint Member
    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!!!

  14. #14
    SitePoint Member
    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...

  15. #15
    SitePoint Wizard gRoberts's Avatar
    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.


  16. #16
    SitePoint Wizard gRoberts's Avatar
    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.


  17. #17
    SitePoint Member
    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&#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...

  18. #18
    SitePoint Wizard gRoberts's Avatar
    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>
    ?


  19. #19
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works like a charm!!! Thanks a lot!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •