How to run a script locally - javascript

I am trying to display XML in an HTML page
<html>
<body>
<script>
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>Author</td><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td></tr><tr><td>Song</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
It works like a charm in W3School Try it yourself section, but I want to run it from my local computer, how can i do this?

Related

How to show more than one xml data in html

I'm trying to do what W3schools has in this example : http://www.w3schools.com/xml/tryit.asp?filename=tryxml_app_first
But in this example it only shows one CD. I would like to display all the the data (in this case CDs) in the xml file.
This is the code that they have:
<!DOCTYPE html>
<html>
<head>
<script>
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;
x=xmlDoc.getElementsByTagName("CD");
i=0;
function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
</script>
</head>
<body onload="displayCD()">
<div id='showCD'></div>
</body>
</html>
Any suggestions?
Thanks

This:
<!DOCTYPE html>
<html>
<head>
<script>
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;
x=xmlDoc.getElementsByTagName("CD");
function displayCD()
{
for (var i=0; i<x.length;i++) {
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
document.getElementById("showCD").innerHTML+=(txt+"<hr/>");
}
}
</script>
</head>
<body onload="displayCD()">
<div id='showCD'></div>
</body>
</html>

Code seems to stop right after .responseXML. xmlDoc is null

<!DOCTYPE html>
<body>
<script>
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","docu.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
{
// This is where my alert indicates that xmlDoc = null
// then nothing else happens below.
document.getElementById("stuff")=xmlDoc.getElementsByTagName("details")
[0].childNodes[0].nodeValue);
}
</script>
<input type="text" name="stuff" id="stuff"/>
</body>
</html>
BELOW IS THE DOCU.XML STORED ON THE ROOT DIRECTORY
<?xml=version '1.0'?>
<root>
<details>xml data does not appear</details>
</root>

Displaying Image from XML into HTML

I have tried to display the following image onto the html, however to no avail. When the html is loaded, it displays the picture icon, but it won't display the image itself. I have copied the code below
Thanks.
HTML Code:
<script>
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","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("TEST");
for (i=0;i<x.length;i++)
{
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
var img = document.createElement("img");
img.src = x[i].getElementsByTagName("imageurl")[0].childNodes[0].nodeValue;
document.write(img.src);
document.body.appendChild(img);
}
document.write("</table>");
</script>
XML:
<?xml version="1.0" encoding="UTF-8"?>
<TEST_GROUP>
<TEST>
<TITLE>Hello World</TITLE>
<imageurl>"CFL_175x175.png"</imageurl>
</TEST>
</TEST_GROUP>

Try this:
<imageurl>CFL_175x175.png</imageurl>

Display XML children in HTML tabs

I am trying to display data from an XML code like this:
<escrutinio_sitio>
<resultados>
<numero_partidos>4</numero_partidos>
<partido>
<nombre>IU</nombre>
<electos>2</electos>
<electo1>AMADEU SANCHIS I LABIÓS</electo1>
<electo2>ROSA ALBERT BERLANGA</electo2>
<votos_numero>28489</votos_numero>
<votos_porciento>7,17</votos_porciento>
</partido>
<partido>
<nombre>COMPROMÍS-Q</nombre>
<electos>3</electos>
<electo1>JOAN RIBÓ CANUT</electo1>
<electo2>CONSOL CASTILLO PLAZA</electo2>
<electo3>MARIA PILAR SORIANO RODRIGUEZ</electo3>
<votos_numero>35881</votos_numero>
<votos_porciento>9,03</votos_porciento>
</partido>
</resultados>
</escrutinio_sitio>
for doing so, I have this JavaScript code which tries to obtain the nombre tag value into the title of different tabs, but it does not work as it should.
<script>
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","resultadosval.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<ul class="nav nav-tabs">");
var branch = xml_doc.getElementsByTagName("partido");
for(i=0;i<branch.length;i++) {
subbranch = branch[i].childNodes ;
for(j=0;j<subbrach.length;j++) {
if (subbranch[j].nodeName=="nombre" ){
document.write("<li class="active"><a href="#tab_a" data-toggle="tab">");
document.write(subbranch[j].childNodes[0].nodeValue);
document.write("</a></li>");}
}
}
document.write("</ul>");
</script>
What am I doing wrong?
Thank you

Observe the quotation marks "" and ''.. Please note that you had string breaks which throws the errors and script execution breaks. Due to which you seem to have a problem
<script>
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","resultadosval.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<ul class='nav nav-tabs'>");
var branch = xml_doc.getElementsByTagName("partido");
for(i=0;i<branch.length;i++) {
subbranch = branch[i].childNodes ;
for(j=0;j<subbrach.length;j++) {
if (subbranch[j].nodeName=="nombre" ){
document.write("<li class='active'><a href='#tab_a' data-toggle='tab'>");
document.write(subbranch[j].childNodes[0].nodeValue);
document.write("</a></li>");}
}
}
document.write("</ul>");
</script>

XML File Retrieval wont work on IE or Chrome

Why wont the following script work on Chrome or IE? It works on Safari and FF. I am just trying to find a basic way to retrieve data from an XML file and display it through HTML. Thanks!
<html>
<body>
<script>
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>

Categories

Resources