Getting element from tag 1

[Carlos1815]

Hello!

I have a question; how do I get the content from a tag's element? I have an XML file with the following structure:

<Content>

  <Mapped>

    <Storyboard ID="11111" Name="1.1 Course name">

      <more xml stuff>32</more xml stuff>

      <more xml stuff>Folder</more xml stuff>

      <Storyboard ID="11112" Name="1.1.1 Lesson name">

        <more xml stuff>32</more xml stuff>

        <more xml stuff>Folder</more xml stuff>

          <Storyboard ID="11113" Name="1.1.1.0  Topic name">

          </Storyboard>
       </Storyboard>
    </Storyboard>
  </Mapped>
</Content>

What I need to do is get Name from ("Storyboard")[0], which, if my counting is correct, happens to be in this case "1.1 Course name". I seem to be closing in on it, but I ran into a wall and I can't figure out the syntax for grabbing that element. I need to be able to grab that element name, strip off the preceding number.number (I think I know how to do that with a substring function), and display it as a link on a main menu for a student to click on. I want to be able to dynamically grab all the course and lesson names and display them on the main menu rather than hard code each of them into the main menu HTML file. I already have the links set up, but they are all hard coded and like I said above, I want to be able to automatically populate the main menu from the XML using code.

Any help would be appreciated!

Thanks in advance!
Carlos

 

[BillyRayPreachersSon]

Assuming that the XML is being returned by an AJAX call, you should be able to query the responseXML, something like this:

var sb = yourAjaxObj.responseXML.getElementsByTagName('Storyboard')[0];
var sbName = sb.getAttribute('Name');

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 Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[Carlos1815]

Dan,

With a small adjustment, it worked!

    var asdf1 = xmlDoc.getElementsByTagName("Storyboard")[1];
    var asdf2 = asdf1.getAttribute("Name");

if (sectionText1.innerHTML == "") {

sectionText1.innerHTML = "<a href='javascript:launchTopic(1,0,0);'>" + asdf2.substr(asdf2.lastIndexOf(".") + 3, lessonName.length) + "</a><br>";
		    
		}
		else {
		sectionText1.innerHTML = "";		
}

However, it brought up another issue. There can be one lesson, or many; so how can I populate a list of lessons? Essentially, there can be many instances of ("Storyboard")[1]:

<Content>

  <Mapped>

    <Storyboard ID="11111" Name="1.1 Course name">

      <more xml stuff>32</more xml stuff>

      <more xml stuff>Folder</more xml stuff>

      <Storyboard ID="11112" Name="1.1.1 First Lesson name">

        <more xml stuff>32</more xml stuff>

        <more xml stuff>Folder</more xml stuff>

          <Storyboard ID="11113" Name="1.1.1.0  Topic name">

          </Storyboard>
       </Storyboard>
      <Storyboard ID="11114" Name="1.1.2 Second Lesson name">

        <more xml stuff>32</more xml stuff>

        <more xml stuff>Folder</more xml stuff>

          <Storyboard ID="11115" Name="1.1.2.0  Topic name">

          </Storyboard>
       </Storyboard>
      <Storyboard ID="11116" Name="1.1.3 Third Lesson name">

        <more xml stuff>32</more xml stuff>

        <more xml stuff>Folder</more xml stuff>

          <Storyboard ID="11117" Name="1.1.3.0  Topic name">

          </Storyboard>
       </Storyboard>

    </Storyboard>
  </Mapped>
</Content>

I know this might be an easy question, but I'm totally new to javascript and this is one of the last things I need to do. Thanks!

Carlos

 

[BillyRayPreachersSon]

There are many ways to pick out specific elements, so I'd go with whichever works for you. Also bear in mind that I may have missed some ways, so if you find another way that works for you, you should go with it.

You could use an attribute only on the lesson Storyboard elements, e.g:

<Content>
	<Mapped>
		<Storyboard ID="11111" Name="1.1 Course name">
			<more xml stuff>32</more xml stuff>
			<more xml stuff>Folder</more xml stuff>
			<Storyboard ID="11112" [!]Lesson="true"[/!] Name="1.1.1 Lesson name">
				<more xml stuff>32</more xml stuff>
				<more xml stuff>Folder</more xml stuff>
				<Storyboard ID="11113" Name="1.1.1.0 Topic name">
				</Storyboard>
			</Storyboard>

			<Storyboard ID="11114" [!]Lesson="true"[/!] Name="2.1.1 Another lesson name">
				<more xml stuff>32</more xml stuff>
				<more xml stuff>Folder</more xml stuff>
				<Storyboard ID="11115" Name="2.1.1.0 Another topic name">
				</Storyboard>
			</Storyboard>
		</Storyboard>
	</Mapped>
</Content>

and then use a "getElementsByAttribute" function similar to the one here:

http://snipplr.com/view/1853/get-elements-by-attribute/

Of course, you could always use the "class" attribute instead of a custom attribute, and "getElementsByClassName" functions are not in short supply. Most modern browsers have them built in these days, in fact (Fx, Opera, safari, Chrome, etc - just not IE < v9).

If you're using a JS library such as jQuery, you could use the CSS attribute selectors to do this for you (assuming that jQuery can work with XML returned from an AJAX call... I don't see why it wouldn't be able to):

var lessons = $('Storyboard[lesson="true"]');

Or, for the class attribute, assuming it was set to 'lesson':

var lessons = $('Storyboard.lesson');

Another way, assuming that the lesson Storyboard elements are always at the second level, would be to loop over the childNodes of the first-level Storyboard elements, testing their tag name, etc.

Personally, I'd go with the custom attribute or the class name.

Incidentally... have you considered returning the information as JSON instead of XML? It would be far easier to parse.

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 Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign