Firefox returns "undefined" when parsing XML

JavaScript
1

Morning All - I have some pretty standard code to iterate through a XML file and pull out data that matches an id variable. The IE browser works perfectly and returns the correct node values but Firefox will not. It returns undefined. It does return the correct node name when using “tagName” but when using .text to grab the string in the node ----nada.

Here’s the function:

function parseXML()
{
if (xmlDoc.readyState == 4)
{
if (xmlDoc.status == 200)
{
xmlDoc = xmlDoc.responseXML;
xmlObj = xmlDoc.getElementsByTagName(“region”);
for (var y = 0; y < xmlObj.length; y++)
{
if (xmlObj[y].getAttribute(“id”) == regID)
{
var hotelprice = xmlObj[y].getElementsByTagName(“hotelprice”)[0].text;
var pkgprice = xmlObj[y].getElementsByTagName(“pkgprice”)[0].text;
document.getElementById(“hotel”).innerHTML = “$”+hotelprice;
document.getElementById(“package”).innerHTML = “$”+pkgprice;
}
}
}
}
}

If anyone has any thoughts on this . . . please weigh in.

Thanks for reading and thanks for any help

2

try changing


xmlObj[y].getElementsByTagName("hotelprice")[0].text;

to


xmlObj[y].getElementsByTagName("hotelprice")[0].nodeValue;
3

Well, this returns null in both IE & Firefox. What exactly does this tell me?

thanks for the quick response.

4

Do you have a sample of the XML document?

5

It looks like this:

****

<?xml version="1.0" encoding="utf-8"?>
<soatripfinder>
	<region id="888">
		<hotelprice>115</hotelprice>
		<pkgprice>499</pkgprice>
	</region>
	<region id="12569">
		<hotelprice>88</hotelprice>
		<pkgprice>378</pkgprice>
	</region>
</soatripfinder>

****
6

Sorry it was firstChild.nodeValue


            function parsedXML() {

                if(xmlDoc.readyState == 4 && xmlDoc.status == 200) {

                    var doc = xmlDoc.responseXML.documentElement;
                    var regions = doc.getElementsByTagName('region');
                    for(var i = 0; i < regions.length; i++) {
                        if(regions[i].getAttribute('id') == regID) {

                            var hotelPrice = regions[i].childNodes[0].firstChild.nodeValue;
                            var packagePrice = regions[i].childNodes[1].firstChild.nodeValue;
                            document.getElementById("hotel").innerHTML = "$"+hotelPrice;
                            document.getElementById("package").innerHTML = "$"+packagePrice; 

                        }
                    }

                }

            }
7

Very interesting. IE likes this and is rendering the correct data.

FF is now throwing a javascript error on the page instead of displaying null.

regions[i].childNodes[0].firstChild has no properties

my javascript is in the <head> tag on the page. i wondered if FF is crabby with that and may need the function in another place on the page

8

that is strange, as I tested the code in Firefox as well…

I have recreated my test code and it works in Firefox…


<!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="all" />
        <style type="text/css"></style>
        <script type="text/javascript">
            
            var xmlDoc = null;

            var regID = 12569;

            function parsedXML() {

                //if(xmlDoc.readyState == 4 && xmlDoc.status == 200) {

                  //  var doc = xmlDoc.responseXML.documentElement;
                    var doc = xmlDoc.documentElement;
                    var regions = doc.getElementsByTagName('region');
                    for(var i = 0; i < regions.length; i++) {
                        if(regions[i].getAttribute('id') == regID) {

                            var hotelPrice = regions[i].childNodes[0].firstChild.nodeValue;
                            var packagePrice = regions[i].childNodes[1].firstChild.nodeValue;
                            //document.getElementById("hotel").innerHTML = "$"+hotelPrice;
                            //document.getElementById("package").innerHTML = "$"+packagePrice; 
                            alert('Hotel: $'+hotelPrice+'\
Package: $'+packagePrice);

                        }
                    }

                //}

            }

            function parseXML() {
                text='<?xml version="1.0" encoding="utf-8"?><soatripfinder><region id="888"><hotelprice>115</hotelprice><pkgprice>499</pkgprice></region><region id="12569"><hotelprice>88</hotelprice><pkgprice>378</pkgprice></region></soatripfinder>';
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
  }
  catch(e)
  {
  alert(e.message);
  return;
  }
}
parsedXML();
}

    window.onload = parseXML;
        
        </script>
    </head>
    <body>
        
    </body>
</html>
9

I can’t tell you how much I appreciate the fact that you went to all that work to reproduce my problem . . . however it is still a persisting problem.

Could the fact that this whole function and xml call is inside of an iframe make any difference in FF?

Thank you for your work on the problem.

10

Reason it fails in Firefox is that regions.childNodes[0] is a #text node…

In Mozilla, all whitespace in the text content of the original document is represented in the DOM.

11

I got it to work. Looks like this:


function parseXML()
        {
            if (xmlDoc.readyState == 4 && xmlDoc.status == 200)
            {
                    xmlDoc = xmlDoc.responseXML;
                    regions = xmlDoc.getElementsByTagName("region");
		            for (var i = 0; i < regions.length; i++)
		            {
		                if (regions[i].getAttribute("id") == regID)
		                {
		                    var browserName = navigator.userAgent;
                            var isIE = browserName.match(/MSIE/);
                            if (isIE)
		                    {
		                        var hotelprice = regions[i].childNodes[0].firstChild.nodeValue;
		                        var pkgprice = regions[i].childNodes[1].firstChild.nodeValue;
		
		                    }
		                    else
		                    {
		                        var hotelprice = regions[i].childNodes[1].textContent;
		                        var pkgprice = regions[i].childNodes[3].textContent;
		                    }
		                    document.getElementById("hotel").innerHTML = "$"+hotelprice;
		                    document.getElementById("package").innerHTML = "$"+pkgprice;
		                }
		            }
            }
        }

I do have one more question for you though. I am opening two xml files on this page. I can get all the information from both in IE but again Firefox wants something other than this (which I know has to be bad coding)


function addEvent(obj,evType,fn){if(obj.addEventListener){obj.addEventListener(evType,fn,false);return true;}else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}else{return false;}}

            addEvent(window, 'load', loadXML);
            addEvent(window, 'load', loadXML2);

In Firefox which ever function loads last is what renders to the page. Why is this so and how can I stop it?

Thanks againg for your help.

12

addEvent does not fire in an certain order. Its completely random.

If you would like to fire in a certain order you can use


addEvent(window, 'load', function() {
loadXML();
loadXML2();
});

loadXML2? Does this access a completely different set of elements?

13

Instead of the above, use the following for a cross-browser solution without sniffing:

var hotelprice = regions[i].getElementsByTagName("hotelprice")[0].firstChild.nodeValue;
var pkgprice = regions[i].getElementsByTagName("pkgprice")[0].firstChild.nodeValue;
14