Displaying Image from XML into HTML - javascript

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>

Related

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>

How to run a script locally

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?

getElementsByTagName how to get xml data

I'm using this scipt to make a browser compatible xml reader.
However I never used one of these badboys, and I have no idea how can I get the data from the object tag below.
I need to print it int this part: document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
But here is the full code (with the object xml tag.
<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","myxml.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("property");
for (i=0;i<x.length;i++)
{
document.write("<table border='1'>");
document.write("<tr><td>Utolsomod</td><td>");
document.write(x[i].getElementsByTagName("EPOLeafNode.LastUpdate")[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>");
document.write("<br/>");
}
</script>
<object index="20">
<property name="name1">*somedate*</property>
<property name="name2">*somename*</property>
<property name="name3">*someip*</property>
</object>
try
document.write(xmlDoc.getElementsByTagName("EPOLeafNode.LastUpdate")[0].childNodes[0].nodeValue);
I was able to figure it out as: document.write(x[i].getElementsByTagName("property")[0].childNodes[0].nodeValue);
Thank you guys for helping. :)
try this
XmlDocument axmlDoc = new XmlDocument();
axmlDoc.Load(myxml.xml);
XmlNodeList prop = axmlDoc.GetElementsByTagName("property");
prop[i].InnerText

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>

Can't parse XML from AJAX response

I'm having some problems with parsing the xml response from my ajax script. The XML looks like this:
<IMAGE>
<a href="address">
<img width="300" height="300" src="image.png class="image" alt="" title="LINKING"/>
</a>
</IMAGE>
<LINK>
www.address.com
</LINK>
<TITLE>
This
<i>is title</i>
</TITLE>
<EXCERPT>
<p>
And some excerpt
</p>
</EXCERPT>
The code for js looks like this.
function loadTab(id) {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
var title="";
var image="";
x=xmlDoc.getElementsByTagName("TITLE");
for (i=0;i<1;i++)
{
title=title + x[i].childNodes[0].nodeValue;
}
document.getElementById("ntt").innerHTML=title;
x1=xmlDoc.getElementsByTagName("IMAGE");
for (j=0;j<1;j++)
{
image=image + x1[j].childNodes[0].nodeValue;
}
document.getElementById("nttI").innerHTML=image;
}
}
var url = 'http://www.factmag.com/staging/page/?id='+id;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
When I'm parsing it it pulls out the title but not the IMAGE tag contents. What I'm doing wrong? Can someone please tell me? Thanks in advance!
You don't have XML there, an XML document can have only one root node, so anything following </IMAGE> is an error.
You probably want to wrap your document with a new element.

Categories

Resources