Help with XMl, HTML and Javascript - Page 2 - Graphic Design Forum and Web Design Forum

Nuttycoder · #11 (**permalink**) 11-05-2008, 06:02 PM

I have got it working for you the problem was in the xml file i have restructed the file from to

I've uploaded oil.html and oil.xml in a zip file so you can see it working.

Joe.Morgan · #12 (**permalink**) 11-05-2008, 07:23 PM

thanks nutty - that makes alot more sense! (you can take it down I have downloaded it - thank you)

I tried doing the same as you had but with a further element in the XML tree and have become a bit stuck again:

HTML:

PHP Code:


			
<html>
<body>

<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null) 
{
xmlDoc.async=false;
xmlDoc.load("oil.xml");
var x=xmlDoc.getElementsByTagName("oil");

document.write("<table border='1'>");
document.write("<thead>");
document.write("<tr><th>Rank</th><th>Name</th><th>Production</th></tr>");
document.write("</thead>");

for (var i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("rank")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</td>");

document.write("<td>");
document.write(x[i].getElementsByTagName("sum")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>

</body>
</html>

XML:

PHP Code:


			
<?xml version="1.0" encoding="ISO-8859-1"?>
<oil>
    
        <producers>
          <rank>1</rank>
          <name>Saudi Arabia</name>
          <sum>Produces 10.72 million barrels per day</sum>
        </producers>
        
        <producers>
            <rank>2</rank>
          <name>Russia</name>
          <sum>Produces 9.67 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>3</rank>
          <name>United States</name>
          <sum>Produces 8.37 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>4</rank>
          <name>Iran</name>
          <sum>Produces 4.12 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>5</rank>
          <name>Mexico</name>
          <sum>Produces 3.71 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>6</rank>
          <name>China</name>
          <sum>Produces 3.84 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>7</rank>
          <name>Canada</name>
          <sum>Produces 3.23 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>8</rank>
          <name>United Arab Emirates</name>
          <sum>Produces 2.94 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>9</rank>
          <name>Venezuela</name>
          <sum>Produces 2.81 million barrels per day</sum>
        </producers>
        
        <producers>
          <rank>10</rank>
          <name>Norway</name>
          <sum>Produces 2.79 million barrels per day</sum>
        </producers>    
        
        
    
</oil>

LeadMagnet · #13 (**permalink**) 11-05-2008, 07:51 PM

Change this:
var x=xmlDoc.getElementsByTagName("oil");

To this:
var x=xmlDoc.getElementsByTagName("producers");

Otherwise your for loop contains only 1 iteration (only 1 oil tag)

Joe.Morgan · #14 (**permalink**) 11-05-2008, 07:59 PM

ah yes - thank you leadmagnet!

Nuttycoder · #15 (**permalink**) 11-05-2008, 08:22 PM

Quote:

Originally Posted by Joe.Morgan

thanks nutty - that makes alot more sense! (you can take it down I have downloaded it - thank you)

Your welcome glad to have helped.

Joe.Morgan · #16 (**permalink**) 11-05-2008, 08:25 PM

Nutty - how would I go about styling the HTML with CSS now that the XML is loaded? or would i style the XML before it is loaded?

LeadMagnet · #17 (**permalink**) 11-05-2008, 08:40 PM

You'd do it the same way you'd style anything in a page. After embedding the XML, you've got a regular table like this (even though it's all on one line):

HTML Code:

<table border="1"><thead><tr><th>Rank</th><th>Name</th><th>Production</th></tr></thead><tbody><tr><td>1</td><td>Saudi Arabia</td><td>Produces 10.72 million barrels per day</td></tr><tr><td>2</td><td>Russia</td><td>Produces 9.67 million barrels per day</td></tr><tr><td>3</td><td>United States</td><td>Produces 8.37 million barrels per day</td></tr><tr><td>4</td><td>Iran</td><td>Produces 4.12 million barrels per day</td></tr><tr><td>5</td><td>Mexico</td><td>Produces 3.71 million barrels per day</td></tr><tr><td>6</td><td>China</td><td>Produces 3.84 million barrels per day</td></tr><tr><td>7</td><td>Canada</td><td>Produces 3.23 million barrels per day</td></tr><tr><td>8</td><td>United Arab Emirates</td><td>Produces 2.94 million barrels per day</td></tr><tr><td>9</td><td>Venezuela</td><td>Produces 2.81 million barrels per day</td></tr><tr><td>10</td><td>Norway</td><td>Produces 2.79 million barrels per day</td></tr></tbody></table>

Nuttycoder · #18 (**permalink**) 11-05-2008, 09:34 PM

Yeah you can style the form the way you would normally style it with css

Joe.Morgan · #19 (**permalink**) 12-05-2008, 05:41 PM

Ok kool, my Css knowledge isn't that great so I think ill leave it there. Thanks for all your help guys

scriptage · #20 (**permalink**) 12-05-2008, 06:36 PM

Hey Joe,

I replied to you over at the webdeveloper forums: XML into HTML using Javascript - WebDeveloper.com

Doing it this way keeps it all accessible. What happens when a user has javascript turned off? In the way you are doing it the user will not be able to see the content. If you use XSLT to transform your XML document into XHTML and then use javascript for the interactive features it degrades into an accesible document.

Kind Regards

Carl

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Javascript Mario	jinny	Games	2	02-05-2008 05:56 PM
Javascript SmoothGallery 2.0	Graphic Design Links	Graphic Design Links	0	24-01-2008 12:10 PM
Yahoo & Javascript	Toon	General Web Design Forum	0	12-12-2007 08:05 PM
my javascript website	solidgold	Web Design Forum Showcase	5	12-06-2007 06:24 PM
New Javascript Menu	Toon	General Web Design Forum	1	26-03-2007 01:31 PM