JS + XML relationships

[blax]

Hey all,

I'm having a problem with some AJAX that I need to get working for a site.

I have the following XML:

<class>
	<number>0</number>
	<name>English</name>
	<tasks>
		<task>Essay<date>0</date></task>
	</tasks>
</class>

And I need to relate the task (in this case, "Essay") to the number (0).

I current have something running here, but its not acting how I want it to. The tasks should go back to their respective subjects, but I'm not sure how to relate the child back to its parent, and then to its sibling. I'm not sure if this makes any sense, but if you check out the website, hopefully you can see what I'm talking about.

[vikrantkorde]

Not sure what exactly you are asking for.
but i guess it has something to do with the XML parsing.
1) traverse to the level of task element
2) get the value of the number element i.e. ../../number

[SSJ]

Not sure what exactly you are asking for.
but i guess it has something to do with the XML parsing.

Is it so???

[blax]

Here is my javascript if it helps you interpret what I'm doing.

function makeRequest(url)
{
            if(window.XMLHttpRequest)
            {
                        request = new XMLHttpRequest();
            }
            else if(window.ActiveXObject)
            {
                        request = new ActiveXObject("MSXML2.XMLHTTP");
            }
            sendRequest(url);                                 
}
function sendRequest(url)
{
            request.onreadystatechange = onResponse;
            request.open("GET", url, true);
            request.send(null);
}
function checkReadyState(obj)
{
        if(obj.readyState == 0) { document.getElementById('c0').innerHTML = "Sending Request..."; }
          if(obj.readyState == 1) { document.getElementById('c0').innerHTML = "Loading Response..."; }
          if(obj.readyState == 2) { document.getElementById('c0').innerHTML = "Response Loaded..."; }
          if(obj.readyState == 3) { document.getElementById('c0').innerHTML = "Response Ready..."; }
        if(obj.readyState == 4)
            {
                        if(obj.status == 200)
                        {
                                    return true;
                        }
                        else if(obj.status == 404)
                        {
                                    // Add a custom message or redirect the user to another page
                                    document.getElementById('c0').innerHTML = "File not found";
                        }
                        else
                        {
                                    document.getElementById('c0').innerHTML = "There was a problem retrieving the XML.";
                        }
            }
}
function onResponse()
{
      if(checkReadyState(request))
    {
		var response = request.responseXML.documentElement;
		var class = response.getElementsByTagName('class');

		for(x=0;x<class.length;x++)
		{
			var name = response.getElementsByTagName('name')[x].firstChild.data;
			var j = "c" + x;
			document.getElementById(j).innerHTML = name;
		}
		
		var ts = response.getElementsByTagName('task');
		for(x=0;x<ts.length;x++)
		{
			var task = response.getElementsByTagName('task')[x].firstChild.data;
			var date = response.getElementsByTagName('date')[x].firstChild.data;
			var k = "t" + date;
			document.getElementById(k).innerHTML += "<li class='list'><span class='class" + x + "'>" +  task + "</span></li>";
		}
			document.getElementById(k).innerHTML += "</ol>";
	}

}

The problem comes at

document.getElementById(k).innerHTML += "<li class='list'><span class='class" + x + "'>" +  task + "</span></li>";

where I need to replace x with the value of 'number' from my XML document.

I'm hoping this helps.

[SSJ]

Visit this
http://www.w3schools.com/xml/xml_parser.asp

[blax]

I'm sorry, but I cannot interpret any of that. Perhaps if you take a look at this you will understand it better.

I've already tried to look it up myself on w3schools and other websites, but I simply cannot understand what they're talking about.

[jimfraser]

Does this help?

// get a list of all "class" nodes in the response
var classes = response.getElementsByTagName("class");

// loop through them
for (var i=0; i < classes.length; i++) {
	// create a reference to the current "class" node
	var currentClass = classes[i];
	
	// get a list of all "task" nodes that are in the current class
	
	var tasks = currentClass.getElementsByTagName("task");
	
	// loop through them
	for (var j=0; j < tasks.length; j++) {
		// create a ref to the current task
		var currentTask = tasks[j];
		
		// do something with the objects we have created
		alert("current class name/number " + currentClass.getElementsByTagName("name").firstChild.data + " / " + currentClass.getElementsByTagName("number").firstChild.data);
		alert("current task name/date " + currentTask.firstChild.data + " / " + currentTask.getElementsByTagName("date").firstChild.data);
	}
}

[blax]

Going through it, it seems to be exactly what I need, but I keep getting "firstChild has no properties" errors in Firefox (the site doesn't work at all in ).

I'll work on this some more when I get home to see if I can figure it out. Thanks.

[jimfraser]

mm yeah, I wasnt sure about that part. You might have to replace all the .firstChild.data bits with something more appropriate....in IE I think .text would work but not sure about FF.

[blax]

.text isn't working in either of them. I'm not sure why .data isn't working, since I used the same thing earlier. Could you explain?

When I try to alert various parts of the code I'm getting what seems like header tags. Might that be the problem?

[blax]

Sorry to bump my own thread, but I'm still completely lost here. If someone could give me a hand and tell me why jim's code isn't working I would really appreciate it!