Jump to content

XML to HTML, How?


Recommended Posts

JavaScript from w3schools.com

<html><body><script type="text/javascript">if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","cd_catalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; document.write("<table border='1'>");var x=xmlDoc.getElementsByTagName("CD");for (i=0;i<x.length;i++)  {   document.write("<tr><td>");  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);  document.write("</td><td>");  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);  document.write("</td></tr>");  }document.write("</table>");</script></body></html>

The above code works fantastically in something I'm working on. I just wanted to look upon it, learn more, and expand ideas further.Question #1: How does the math work in this code? I would like to learn the symbols and how it does the math in order to manipulate it further to achieve my next question.I have looked in the Tutorials of JavaScript and cant seem to find anything about how "x." works. And understand very little about "(i=0;i<x.length;i++)"What i currently know, or at least i think it may be true:"i=0" -- i is 0"i<x.length" -- not sure about that one. I do know that, x is xmlDoc.getElementsByTagName("CD")."i++" -- also, a little confused how that comes into play here.Question #2: How can i get it to only read one at a time.For example: Have it start on the first set, then have a button with a little javascript with a function to have it go to the next set (one at a time) (i imagine the button would do something like i=i+1) Thus making sort of a "latest item box" and allowing for further browsing.Why: I would like to use this and it will help me learn more about how to do the math in JavaScript. Doing this through practice is the best way to learn, in my opinion.

Edited by trinaryatom
Link to post
Share on other sites

Thanks for the information. I don't know how i missed that.Anyway, upon reading that i have created the following code.This code only draws one at a time depending on what i equals and if i=0 then its the top, if i=1 its the next, and so on. This is perfect and is exactly what I'm going for.

<script type="text/javascript"><script type="text/javascript">if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","cd_catalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;document.write("<table border='1'>");var x=xmlDoc.getElementsByTagName("CD");i=0function drawTablefunction(){    document.write("<tr><td>");    document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);    document.write("</td><td>");    document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);    document.write("</td></tr>");}document.write("</table>");</script>

This is the HTML of the page. (shorthand, does not work in practical use)

<body>    <div id="addtI">        <input button AdditionI>    </div>    <div id="subtI">        <input button SubtractI>    </div>    <div>         drawTablefunction()    </div></body>

Now i was wondering if i can get buttons to mod the variable "i" to add or subtract and redraw the the one chosen.This code is an idea but doesn't work at all. I'm not sure how to go about this.

	function SubtractI()	{		if(i=x.length)		{			return;		}		else		{			i-1;			drawTablefunction()		}	}	function AdditionI()	{		if(i=0)		{			return;		}		else		{			i+1;			drawTablefunction()		}	}

Edited by trinaryatom
Link to post
Share on other sites

I could try to do something like this. But i don't know how to do the "var AddStuff = (blah,blah,blah,blah)"Javascripti=-1

function updateAddI(){i+1var AddStuff 	{		document.write("<tr><td>");		document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);		document.write("</td><td>");		document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);		document.write("</td></tr>");	}document.getElementById("feedbox").firstChild.nodeValue = AddStuff;}

HTML

<body><div id="addtI"><input button updateAddI()></div><div id="subtI"><input button updateSubI()></div><div id="feedbox"><script>updateAddI()</script></div></body>

Edit: Well i have exhausted everything i know (which is very little of javascript) not sure how to do this at all.

Edited by trinaryatom
Link to post
Share on other sites

Another question has appeared.How do i get multiples of these XML scripts on one page without them breaking each other.For example:CD NavigatorandXML to HTMLboth on one page working.Edit: They seem to be working fine on separate parts of the page, but it just seems wrong.

Edited by trinaryatom
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...