Using XML and JavaScript for navigation

programming web dev
1

OK, not trying to write a book, but I want to make sure to include enough detail, so please bare with me if I start to ramble…

I’m working on a project that has 6 topics, each with about 10-15 lessons, and some lessons with sub-sections (maybe 2 or 3 in each topic). Each lesson is its own HTM page with a name that starts with a letter (a-f), followed by a number, and a sub-section as necessary (Ex: a4.0_3 = first topic, fourth lesson, third sub-section).

I’ve been looking into adding a breadcrumb trail, but since all the lessons are in one folder, I can’t use the methods I’ve seen while searching online. My next idea was to setup my navigation by defining the hierarchy in XML. I’m using a javascript variable (pageID) defined in the HTML to communicate which lesson the user is on and, based on that variable, display the breadcrumb trail.

The main problem I’m running into is that JS function isn’t pulling any of my data from the XML. I’ve been able to manipulate XML the way I need to in Flash with no problems, but every time I try to test my data using an alert, the value comes back as “null”.

I’m trying to accomplish the following:
[LIST=1]
[]Load the XML
[]Get the topicID with “topicID = pageID.charAt(0)”
[]Cycle through the <topic> tags with a for() loop to find one with a matching topicID
[]Cycle through the <title> tags (for() loop again) within the appropriate <topic> until it finds one with a matching pageID[/LIST]I’m pretty sure I can get it all working if I could just get the JS to recognize the XML data.

Here’s my code…

XML structure:

 
<?xml version="1.0"?>
<breadcrumbs>
   <topic name="Process" topicID="a" link="a0.0_1.htm">
      <title name="Welcome" link="a0.0_1.htm" lessonID="a0.0_1">
         <subtitle name="How to use this Training"  lessonID="a0.0_2"/>
      </title>
      <title name="Policy" lessonID="a1.0_1"></title>
      <title name="Background" lessonID="a2.0_1"></title>
      <title name="Official Plants" lessonID="a2.0_2"></title>
   </topic>
   <topic name="Overview" topicID="b" link="b1.0_1.htm">
      <title name="Exempt Products"></title>
      <title name="Shipping Containers" link="b2.0_1">
          <subtitle name="Tankers" />
          <subtitle name="Boxes" />
          <subtitle name="Barrels" />
      </title>
   </topic>
</breadcrumbs>

Here’s the JS:

 
function importXML(){
 if (document.implementation && document.implementation.createDocument){
  xmlDoc = document.implementation.createDocument("", "", null);
  xmlDoc.onload = createTable;
 }else if (window.ActiveXObject){
  xmlDoc.onreadystatechange = function () {
   if (xmlDoc.readyState == 4){
    createTrail(pageID);
   }
  }
 }else{
  alert('Your browser can\'t handle this script');
  return;
 }
}
function createTrail(pageID){
 topicID = pageID.charAt(0);// find topic letter
 var i;
 for(i=0;i<xmlDoc.childNodes.length;i++){
  if(xmlDoc.childNodes*.getAttribute('topicID')==topicID){
   break;
  }
 }
 // this alert is a test to see if the XML data is recognized
 alert(xmlDoc.childNodes*.getAttribute('name'));
 
 for(j=0;j<xmlDoc.childNodes*.childNodes.length;j++){
  if(xmlDoc.childNodes*.childNodes[j].getAttribute('lessonID')==pageID){
   break;
  }else if(xmlDoc.childNodes*.childNodes[j].hasChildNodes){
   for(k=0;k<xmlDoc.childNodes*.childNodes[j].childNodes.length;k++){ 
   }
  }
 }
}

The importXML() function is called in the HTML <body> tag in “onload”.

Any suggestions? I beat my head against a wall all day with this one, so any help would be greatly appreciated.

Thanks!
-Mike