XML Dom and JavaScript returns null

[baseiber]

Hi all,

I have another problem. I am trying to get the value of an element in XML. I can get the node name but the value shows null. There is a value in the xml and all the files are in the same folder. I'm really puzzled.

*Note the getGallery() function is called by the Body onload event.
Javascript

function loadXMLDoc(strXmlFileName)
{//loads the XML
try //Internet Explorer
{ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{ xmlDoc=document.implementation.createDocument("","",null); }
catch(e)
{
alert(e.message)
return(null);
}
}
try
{
xmlDoc.async=false;
xmlDoc.load(strXmlFileName);
return(xmlDoc);
}
catch(e)
{
alert(e.message)
return(null);
}
}

function getGallery()
{
var xmlDoc;
var sectionNodes;
var sectionID;
var intI;

xmlDoc=loadXMLDoc("photoGallery.xml");
sectionNodes=xmlDoc.getElementsByTagName("section");

for (intI=0; intI < sectionNodes.length; intI++)
{
if(sectionNodes[intI].attributes[0].nodeValue=="water")
{//compare the section ID to galleryID

alert(sectionNodes[intI].firstChild.nodeName);
alert(sectionNodes[intI].firstChild.nodeValue);
alert(sectionNodes[intI].childNodes[0].nodeName);
alert(sectionNodes[intI].childNodes[0].nodeValue);

intI=sectionNodes.length;
}
}
}


I have attached the xml as the following txt file. 10996

Please help if you can. I have a deadline tomorrow and if I don't have this site up I'll get penalised.

Thanks!

[Kor]

Try:

sectionNodes=xmlDoc.document.getElementsByTagName("section");
...
if(sectionNodes[intI].childNodes[0].nodeValue=="water")

[baseiber]

Thanks. I gave that a shot. I get document if null or not an object.

The if statement works the way I had it. It's when I try to get section_title that I get null.
That's the part where I am using the alerts.

[baseiber]

This is what worked.

sectionNodes[intI].getElementsByTagName("section_title")[0].childNodes[0].nodeValue;

It looks like the text inside the section_title element is a child. Maybe it has something to do with the fact that the other elements on the same level as section_title have child nodes. :o

[baseiber]

I also tried this out:
sectionNodes[intI].childNodes[0].childNodes[0].nodeValue

[baseiber]

Well, it works great in IE 6. It doesn't work in Firefox. (bangs head on desk repeatedly in frustration.) I wonder if it would work in IE 7.

If anyone would be willing to check it out here's the practise page. http://www.baseiber.com/designExamples/IdealLandscapeSolutions/start.htm The site loads extremely slow because of the graphics. I need to optimize the file size still.

[Kor]

relative referring by childNodes nextSibling or previousSibling is tricky, as IE and Moz count the child nodes in different ways, according to the gaps (empty spaces between tags).

Now, I saw you XML. Tell me which values (from which XML tags) you want to get, and I'll show you the crossbrowser way.

[baseiber]

Here is a more complete version of the xml for the section I want to deal with:

<?xml version="1.0" encoding="iso-8859-1"?>
<photo_gallery>
<section id="water">
<section_title><![CDATA[Water Features]]></section_title>
<description><![CDATA[
Experience the peace, tranquility, and relaxation of a backyard waterfall or pond. Known for their
breathtaking beauty, highly desired for their calming & therapeutic qualities. Water features in
landscapes today offer endless possibilities. We will bring the finest materials harvested by
nature, when we create a waterfall or pond perfectly suited to you. Now low maintenance, owner -
friendly, and more affordable than ever before.
]]></description>
<thumbnail id="water_1">
<image_source>images/waterfeatures/thumbnails/thumb_constructedWaterfall.jpg</image_source>
<title><![CDATA[Constructed Waterfall]]></title>
<alternative_text><![CDATA[Waterfall built into the side of steps and patio.]]></alternative_text>
</thumbnail>
<thumbnail id="water_2">
<image_source>images/waterfeatures/thumbnails/thumb_funGrotto.jpg</image_source>
<title>Fun Grotto</title>
<alternative_text>A peaceful waterfall with a playful frog floating on the water and a turtle on the shore.</alternative_text>
</thumbnail>
<thumbnail id="water_3">
<image_source>images/waterfeatures/thumbnails/thumb_healingGardenWaterfall.jpg</image_source>
<title>Healing Garden Waterfall</title>
<alternative_text>A rocky waterfall surrounded by moss and trees.</alternative_text>
</thumbnail>
<thumbnail id="water_4">
<image_source>images/waterfeatures/thumbnails/thumb_lilyPadPond.jpg</image_source>
<title>Lily Pad Pond</title>
<alternative_text>Small pond containing numerous lily-pads.</alternative_text>
</thumbnail>
<thumbnail id="water_5">
<image_source>images/waterfeatures/thumbnails/thumb_looseStoneWaterfall.jpg</image_source>
<title>Waterfall</title>
<alternative_text>Waterfall flowing down rough-hewn stones.</alternative_text>
</thumbnail>
<thumbnail id="water_6">
<image_source>images/waterfeatures/thumbnails/thumb_lushGrotto.jpg</image_source>
<title>Lush Grotto</title>
<alternative_text>Pond with small waterfall suronded by foliage.</alternative_text>
</thumbnail>
</section>
</photo_gallery>


I put in the CDATA thing to avoid problems with spaces in the text. I am trying to get
"Water Features" in the section_title
the paragraph in description
the id in thumbnail
the url in image_source
"Constructed Waterfall" in title under thumbnail
etc.

I think if I can get help with that much I can do the rest on my own. I really appreciate your help.

[rpgfan3233]

Will this do?
var sec_titles = document.getElementsByTagName('section_title');
for (var sec_title = 0; sec_title < sec_titles.length; ++sec_title)
{
var child_nodes = sec_titles[sec_title].childNodes;
for (var child = 0; child < child_nodes.length; ++child)
{
if (child_nodes[child].nodeType == 4)
alert(child_nodes[child].nodeValue);
}
}

The only bit that should really need explaining is that if the node type is 4 (CDATA), then something is done with the node value because the node value of a CDATA node is the same as the contents of the CDATA node.

[baseiber]

I've got it! It's working in IE6 and Firefox!!! Here's my javascript:

function getGallery()
{
var sectionID;
var xmlDoc;
var sectionNodes;
var thumbNodes;
var intI;
var intJ;
var intNewLine;
var txtHeader;
var txtIntro;

xmlDoc=loadXMLDoc("photoGallery.xml");
sectionNodes=xmlDoc.getElementsByTagName("section");

for (intI=0; intI < sectionNodes.length; intI++)
{
//compare the section ID to galleryID
if(sectionNodes[intI].attributes[0].nodeValue=="water")
{
try{
//get the data from xml
txtHeader=sectionNodes[intI].getElementsByTagName("section_title")[0].childNodes[0].nodeValue;
txtIntro=sectionNodes[intI].getElementsByTagName("description")[0].childNodes[0].nodeValue;
thumbNodes=sectionNodes[intI].getElementsByTagName("thumbnail");

//put header and intro paragraph into HTML
document.getElementById("titleHeader").innerHTML=txtHeader;
document.getElementById("galleryIntro").innerHTML=txtIntro;

//get images info
for (intJ=0; intJ < thumbNodes.length; intJ++)
{
alert(thumbNodes[intJ].getElementsByTagName("title")[0].childNodes[0].nodeValue);
}

}catch(e)
{alert(e.message);}

//exit out of top level loop
intI=sectionNodes.length;
}
}
}



The main thing I kept forgetting was to use an index with a child node. thumbNodes[intJ].getElementsByTagName("title")[0].