Javascript/XML DOM Not working?

Question

I'm having trouble with some XML DOM. (Never really used it before, but I thought I'd take a shot.) - I'm using it for my portfolio (and other pages with content.) on my site, linking thumbnails with their links, titles, descriptions etc.

Anyway, I'm not exactly sure what the problem is, but it doesn't work. /:

.js

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

function imageList(value)
{
    xmlDoc=loadXMLDoc("uploads.xml");
    x=xmlDoc.getElementsByTagName(value)[0].childNodes;
    for (i=0;i<x.length;i++)
    {
        document.write("<h1>"+x[i].getAttribute('id')+"</h1>");
        document.write("<ul style='list-style-type: none;'>");
        y=x[i].childNodes;
        for(j=0;j<y.length;j++)
        {
            document.write("<li style='background: url("+y[j].getAttribute('thumbnail')+") no-repeat center center;'><a href='#'></a></li>");   
        }
        document.write("</ul>");
    }
}

.html

<html>
    <head>
        <script type="text/javascript" src="js/xmldata.js"></script>
    </head>
    <body>
        <script>
            imageList("portfolio");
        </script>
    </body>
</html>

.xml

<?xml version="1.0" encoding="UTF-8"?>
<portfolio>
    <year id="2014">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
    <year id="2013">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
    <year id="2012">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
    <year id="2011">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
</portfolio>

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — SomeKittens, Jan 22 '14 at 00:04

score 0 · Accepted Answer · answered Jan 22 '14 at 00:17

It looks like you are just not dealing with Text nodes. It's a little tricky to make a perfect demo in JSFiddle from your code (JSFiddle doesn't allow document.write and it's AJAX echo is a POST service, but with a little jQuery you can hide these details (yes I understand I made that nit about jQuery) and focus on making these simple changes to the rendering code (demo):

First adding these two helper functions (from here):

function is_ignorable( nod )
{
  return ( nod.nodeType == 8) || // A comment node
         ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
}

function is_all_ws( nod )
{
  // Use ECMA-262 Edition 3 String and RegExp features
  return !(/[^\t\n\r ]/.test(nod.data));
}

The success callback can be rewritten as:

function imageList(value)
{
    xmlDoc=loadXMLDoc("uploads.xml");
    x=xmlDoc.getElementsByTagName(value)[0].childNodes;
    for (i=0;i<x.length;i++)
    {
      if(!is_ignorable(x[i])) {
        document.write("<h1>"+x[i].getAttribute('id')+"</h1>");
        document.write("<ul style='list-style-type: none;'>");
        y=x[i].childNodes;
        for(j=0;j<y.length;j++)
        {
          if(!is_ignorable(y[j])) {
            document.write("<li style='background: url("+y[j].getAttribute('thumbnail')+") no-repeat center center;'><a href='#'></a></li>");
          }
        }
        document.write("</ul>");
       }
    }
}

Thank you very much! (: Worked perfectly. – Kyron Jan 22 '14 at 00:46 — Kyron, Jan 22 '14 at 00:46

Javascript/XML DOM Not working?

1 Answers1