JavaScript / XML / IE and Firefox

**siteguru** · Dec 14, 2006, 02:35

I have some well-formed XML code, example below ...

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<sensors>
	<sensor>
		<group>Current Sensors</group>
		<series>CSN</series>
		<subcat>Closed Loop</subcat>
		<listing>CSNA111</listing>
		<title>50 A nominal, 70 A range, 1000 turns</title>
		<desc>The CSN Series of closed loop current sensors are based on the principles of the Magnetoresistive or Hall effects, and the null balance or zero magnetic flux method (feedback system). The magnetic flux in the sensor core is constantly controlled at zero. The amount of current required to balance zero flux is the measure of the primary current flowing through the conductor, multiplied by the ratio of the primary to secondary windings. This closed loop current is the output from the device and presents an image of the primary current reduced by the number of secondary turns at any time. This current can be expressed as a voltage by passing it through a resistor.</desc>
		<features>
			<fitem>Measures ac, dc and impulse currents</fitem>
		</features>
		<apps>
			<appitem>Variable speed drives</appitem>
		</apps>
	</sensor>
</sensors>

I have an HTML page with JavaScript code that reads this XML file and is supposed to display the data ...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>XML tester</title>

<script type="text/javascript">

var msie = (window.ActiveXObject) ? true : false;

var moz = (document.implementation && document.implementation.createDocument) ? true : false;

function importXML( xmlFile )
{
	if (moz)
	{
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = showGroups;
	}
	else if (msie)
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.onreadystatechange = function () {
			if (xmlDoc.readyState == 4) showGroups();
		};
 	}
	else
	{
		alert('Your browser can\'t handle this script');
		return;
	}
	if ( !xmlDoc.load(xmlFile) ) {
		alert ("Failed to load XML data source!");
	};
}

function showGroups ()
{
	// This function creates a linked list of product groups
	var x = xmlDoc.getElementsByTagName('sensor');
	var arrGroups = new Array ();
	var ctr = 0;
	for (i=0;i<x.length;i++)
	{
		var theNode = x[i].childNodes[0];
		if (theNode.nodeType != 1) continue;
		var theGroup = theNode.firstChild.nodeValue;
		var groupExists = false;
		for (j=0;j<arrGroups.length;j++)
		{
			if (theGroup == arrGroups[j])
			{
				groupExists = true;
			}
		}
		if (!groupExists)
		{
			arrGroups[ctr] = theGroup;
			ctr++;
		}
	}

	// Show the groups
	var newUL = document.createElement('UL');
	for (i=0;i<arrGroups.length;i++)
	{
		var newLI = document.createElement('LI');
		var newA = document.createElement('A');
		newA.setAttribute('href','#');
		newA.setAttribute('onClick','showListings ( "listings", ' + arrGroups[i] + ' )');
		var theData = document.createTextNode(arrGroups[i]);
		newA.appendChild(theData);
		newLI.appendChild(newA);
		newUL.appendChild(newLI);
	}
	document.getElementById('groups').appendChild(newUL);
}
</script>
</head>

<body onload="importXML( 'sensors.xml' )">

<div id="groups"><h3>Product Groups</h3></div>

</body>
</html>

This works fine in IE6. However Firefox1.5 shows nothing (there should be a rendered list under the Product Groups H3 tag) - all it shows (when I view generated source) is one set of <ul></ul> tags but no <li></li> etc tags.

Anyone got any clues/pointers as to why this is?

**siteguru** · Dec 14, 2006, 03:09

Additional info - it seems that Firefox is recognising the nodes as type=3 (i.e. nodeText) and not type=1 (nodeElement).

**siteguru** · Dec 14, 2006, 04:12

Looks like whitespace in the XML file is to blame - FF is reacting correctly by recognising whitespace as nodeText. I stripped the whitespace and it now works.

Any good ideas on how to import an XML file and strip the whitespace in JavaScript whilst still retaining the XML properties?

(An alternative is to strip and create arrays representing the nodes).

**MikeFoster** · Dec 14, 2006, 12:05

Your code should not assume that text nodes will not be present. When parsing a DOM always skip over any node with nodeType!=1 (if you are only looking for Element nodes).

You can use wrapper functions which take care of the grunt work for you, for example: xFirstChild, xNextSib, etc.

**siteguru** · Dec 15, 2006, 03:47

Thanks for the pointers Mike. That looks like a very nice library.

**siteguru** · Dec 18, 2006, 05:21

Mike,

I'm having a problem with your X library, specifically with the xGetElementsByTagName function. In Firefox it works perfectly - in IE6 I get the error Wrong number of arguments or invalid property assignment. The line generating the error is

Code:

if (p.getElementsByTagName) { // DOM1

and I am calling it with

Code:

var x = xGetElementsByTagName ('group', xmlDoc);

(xmlDoc is generated as per my first post).

Any ideas what's happening? As I say, FF1.5 works perfectly.

**siteguru** · Dec 18, 2006, 07:30

I should also say that doing an alert (p) just before that if() line shows [object] in IE6 and [object XMLDocument] in FF1.5.

**MikeFoster** · Dec 19, 2006, 10:10

siteguru, sorry I don't have much time for a response.

It sounds like your data is not being served as "text/xml". Is it?

Read my comments in the "description" on this page.

**siteguru** · Dec 20, 2006, 04:41

But this all relates to remote (URL path) files. I'm trying to run the HTML page as a filesystem file (e.g. run from CD) wherein the XML data source is in the same folder as the HTML file.

Any other clues/advice?

**MikeFoster** · Dec 20, 2006, 07:42

Hi siteguru, I've made a change to xGetElementsByTagName because of something strange in IE:

typeof xmlDoc.getElementsByTagName is 'unknown', but the function does exist. More IE crap

Copy the source from the link above and paste over the contents of the file: "x/lib/xgetelementsbytagname.js".

**El Fuego** · Dec 21, 2006, 01:59

Thanks Mike. I had come to the same conclusion and got it to work by putting the IE part first (p.all etc.) but your update is more elegant.

Thanks for your help with this - much appreciated.

All I need to figure out now is how to get JS to dynamically put an image into the Specifications area, but that's a different question.

PS - yes this is siteguru. For some weird reason, from mid-morning yesterday I have no longer been able to access my siteguru account. I've tried the password reset but the emails haven't been coming through. (The first one did, but when I followed the link the follow-up didn't and then the site said the request was >24 hours old! So I've created this new account.

)

**El Fuego** · Dec 21, 2006, 08:36

Actually, I've got that sorted. It's all working hunky-dory!

**MikeFoster** · Dec 21, 2006, 10:06

The SitePoint Forums have moved.

User Tag List

Thread: JavaScript / XML / IE and Firefox

Thread Tools

Display

JavaScript / XML / IE and Firefox

Bookmarks

Bookmarks

Posting Permissions