Loading XML into html tree structure? 1

MrMiyagi · Oct 10, 2009

Hello, This might be complex but lets see if someone has an idea for best practice how to do this. There are two steps but even solvin the first one would be a huge help. Perhaps some framework like prototype/scriptaculous or mootools would be helpful...

Step 1.
I need to build an browser application(only javascript) where I can load an xml file and make the browser show the nodes in tree structure. Like this :

http://www.tizag.com/pics/xml/xmltree.gif

Step 2.
I need to be able to drag and drop these xml nodes from the tree structure to a table rows. This table has 2 columns: DOM node XPATH and DOM node text content. I also need to be able to delete these rows.

Challenging one I know...Thanks for all answers!

BillyRayPreachersSon · Oct 10, 2009

Sounds like a fun project to work on... not too big, but big enough to be challenging (which is a good thing)!

I think it's easily do-able, and if you want to use Prototype / script.aculo.us to make it easier to read the XML file (AJAX) and do the drag / drop, even more so.

Personally, I'd read the XML in with AJAX to get it into a traversable XML DOM, and recursively go through the nodes building up the tree (and coming back up for the next branch when appropriate).

As for the tree, I'd avoid the temptation to use tables, as either you'd have to have nested tables, or constantly update colspan attributes. It would be easier IMHO to simply have floated DIVs with a % width (1 item = 100%, 2 items = 50% each, 6 items = 16.66% each, etc).

Once you have the tree, adding drag / drop with Prototype / script.aculo.us should be a doddle, as their Draggable code is very easy to get to grips with.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

MrMiyagi · Oct 11, 2009

Thanks Dan,

I think I need to do some studying with my jscript/dom skills to get thisone moving.

I know how to use the drag and drop feature of scriptaculous, but im stuck in the beginning. I have never before loaded an xml file into a html doc..What would be the easiest way to do this(prototype/scriptaculous?)? And what is a "traversable" DOM?

I know how to create new objects to dom with prototype. For example:

function addNode(){
var newnode = new Element('div', { 'id': 'treeelement', 'style': 'background-color:#926164;height:20px;width:20px;' }).update("Tree element");
$('tree').insert(newnode);
}

I dont know how to get it to draw the "tree braches" or lines between the boxes. Anyone know a link to some great tutorial for how to load xml nodes with prototype?
All tips are very much welcome.

BillyRayPreachersSon · Oct 11, 2009

Check out the Prototype introduction to AJAX here:

http://www.prototypejs.org/learn/introduction-to-ajax

It gives you some good basic examples on how to load a file.

Here's a basic example of how to obtain and traverse an XML DOM:

Code:

<html>
<head>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript">

		window.onload = function() {

			var myRequest = new Ajax.Request('testXML.xml', {
				method: 'get',
				onSuccess: function(responseData) {
					// Get the XML document
					var xml = responseData.responseXML;

					// Get the overall parent '<items>' node
					var items = xml.documentElement;

					// While you could iterate over items.childNodes, doing so would also give you whitespace nodes.
					// Avoid this by using 'getElementsByTagName' instead
					var items = items.getElementsByTagName('item');

					// Loop over all the '<item>' nodes
					for (var loop=0; loop<items.length; loop++) {
						// 'item' will hold '<node id="node01">' on the first iteration, and '<node id="node02">' on the second.
						var item = items[loop];

						// Read the attributes and a child Node
						var itemId = item.getAttribute('id');
						var itemName = item.getElementsByTagName('name')[0].firstChild.nodeValue;

						alert('Found <item>\nId:' + itemId + '\nName:' + itemName);
					}
				}
			});

		}

	</script>
</head>

<body>
</body>
</html>

It assumes this XML file:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<items>
	<item id="node01">
		<name>A node</name>
		<url>[URL unfurl="true"]http://www.google.co.uk/</url>[/URL]
	</item>
	<item id="node02">
		<name>Another node</name>
		<url>[URL unfurl="true"]http://www.yahoo.co.uk/</url>[/URL]
	</item>
</items>

There are two "gotchas" you might encounter very quickly into development:

1: You cannot do this locally over a file:// protocol. You have to be running a web server.

2: Prototype wraps a try/catch around its AJAX calls, so if your onSuccess method (or any function it calls), has an error, you'll never find out about it. The best way to counter this is to wrap the contents your onSuccess function in its own try/catch block with an alert of some sort.

That should get you on your way, at least.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Loading XML into html tree structure? 1

MrMiyagi

Technical User

BillyRayPreachersSon

Programmer

MrMiyagi

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor