Can't parse XML from AJAX response - javascript

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.

Related

Converting Text input to an actual parameter for javascript function

I need to convert the messbox value so it can be passed into the loadPHPDoc function, but i cannot seem to successfully transfer the data. It successfully loads the php document when i place quotation marks around the actual parameter, but i do not, it simply does not use the function, and does not work. Here's my code:
<!DOCTYPE html>
<html>
<body>
<p id="myDiv">no</p>
<script>
function loadPHPDoc(str){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "testSubmit.php";
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","testSubmit.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var sender = "q=" + str;
xmlhttp.send(sender);
document.getElementById("myDiv").innerHTML = str;
}
</script>
<p>Message <input type= "text" id="messbox"></p>
<button type= "button" onclick="loadPHPDoc(document.getElementById(messbox).value)">input</button>
</body>
</html>
document.getElementById() receives a string as a parameter, so:
<button type= "button" onclick="loadPHPDoc(document.getElementById('messbox').value)">input</button>

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>

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

Unexpected Identifier Error after Ajax call

I have this HTML code:
<div id="texttheory" class="centertext">'. $short .' </div>';
<button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')">
<img id="imagebutton" src="./images/arrows.png" width="15px" heigth="22px">
</button>
which I produce inside a php script called by a javascript function:
function showTheory (kl) {
var xmlhttp;
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) {
document.getElementById("theory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gettheory.php?kl="+kl,true);
xmlhttp.send();
}
The function changetheory is in a js library properly included in html head tag and it works like this:
function changetheory (content, old) {
document.getElementById("texttheory").innerHTML= content;
document.getElementById("thbutton").setAttribute ('onclick', "javascript:changetheory("+old+", "+content+")");
}
when i click on the thbutton to switch the two text i get error:
Uncaught SyntaxError: Unexpected identifier
on line 1 of the html file.
Anyone can see what's the problem is?
You're missing quotes around the content string for the onclick event.
<button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')">
Should be
<button id="thbutton" class="theory_button" onclick="javascript:changetheory(\''.$long.'\')">

Questions to create a nested list retrieved from an XML-file and displayed in xHTML

The objective is to display a list of URLs in an HTML page. The list is retrieved from another file (currently in XML-format).
Validator: What is the proper xHTML mark-up for a list generated by JavaScript and still validate properly?
I assume the reason is that JavaScript-code inside [ul]'s is not accepted. Is this correct? Is there another solution?
The code below does produce the list anticipated, but it creates a warning (pls see below, 2.).
<ul>list A
<li>item A1</li>
<li>item A2</li>
<ul>List B
<li>item B1</li>
<script type="text/javascript">/* <![CDATA[ */
if (window.XMLHttpRequest)
{ xmlhttp=new XMLHttpRequest(); } // code for IE7+, Firefox, Chrome, Opera, Safari
else
{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // code for IE6, IE5
xmlhttp.open("GET","/test-code/panorama-list2.xml",false);
// xmlhttp.open("GET","/test-code/panorama-list2.xml",true); //this does not work. xmlDoc is null.
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
{ document.write('<li class="menu2">'+'<a href="');
document.write(x[i].getElementsByTagName('link')[0].childNodes[0].nodeValue);
document.write('">');
document.write(x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);
document.write('</li>'); }
//]]></script> //This is line: 136
</ul>
The JavaScript used in the code above is called using the synchronous method and thus creating the Warning:
"An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing
/ Source File: /test-code/index2.htm / Line: 136"
The solution is to use the asynchronous method similar to the code below placed into the section.
The solution is NOT to simply setting 'true' in the function xmlhttp.open (..., ..., true);.
<script type="text/javascript">//<![CDATA[
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{ xmlhttp=new XMLHttpRequest(); } // code for IE7+, Firefox, Chrome, Opera, Safari
else
{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // code for IE6, IE5
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
xmlDoc = xmlhttp.responseXML;
var txt = "";
var txt1 = "";
var x = xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
{
txt = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue + "<br />";
txt1 = x[i].getElementsByTagName('link')[0].childNodes[0].nodeValue + "<br />";
}
{
document.getElementById("myDiv").innerHTML=txt;
document.getElementById("myDiv1").innerHTML=txt1;
}
}
xmlhttp.open("GET","panorama-list2.xml",true);
xmlhttp.send();
}
//]]></script>
That does take care of the Warning.
I assume a solution would be to combine these 2 examples of code.
That's what I am trying:
The Variables 'txt' and 'txt1' retrieve the last entry of the XML-file.
How do I get all entires as well? The amount of entries varies.
Here is the big question:
How can I create a proper list using the asynchronous method and obtain a result like in the initial code example where the list is generated by stepping through the XML-file?
After all, is there is another, better or simpler solution? The file with data for the list shall not be part of the xHTML mark-up.
At last an actual page using the initial code example. The list is revealed by hovering over the button at top-right: http://www.halo-photographs.com/2011-Cascata-da-Bernina/index.htm (yes, this is my own page)
Thanks for your attention.
you code is an soup..
you need refactor that
now with jquery
in the load the you page
you should put somthing how that
$(document).ready(function(){
BeforePrepareList();
});
function BeforePrepareList()
{
var xmlRequest = XmlHttpRequestResolver();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
var xmlDoc = xmlhttp.responseXML;
// you need parse string response a array or use xslt, the next
// is simple for each
ListSetting(xmlDoc);
}
xmlhttp.open("GET","panorama-list2.xml",true);
xmlhttp.send();
}
function XmlHttpRequestResolver()
{
if (window.XMLHttpRequest)
return xmlhttp=new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
else
return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}
function ListSetting(rawdata)
{
ListPopulate($("_PUT_YOUR_LIST_ID_HERE").get(0), rawdata);
}
function ListPopulate(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('All', '');
// THAT IS AN SIMPLE EXAMPLE, CHANGE FOR CREATE tag <a />
$.each(items, function (index,item) {
el.options[el.options.length] = new Option(item.[PROPERTY_A], item.[PROPERTY_B]);
});
}
and .....
more information here
invoke xml and transform http://www.ibm.com/developerworks/xml/library/x-ffox3/index.html
examples de http request http://www.jibbering.com/2002/4/httprequest.html

Categories

Resources