...

View Full Version : Problems accessing xml on localhost and access to getbytagname



mvandall
10-31-2012, 06:20 PM
Hello,
I am new to javascript coding and and am trying to access an xml doc on the localhost and write its contents to a div. The xml file is not formated as a hierarchical data file unfortunately but rather as html, i.e., <table>, <tr>, <td>, etc. tags. The data I'm trying to get to is in the <td> tags - see code below. So, I'm trying too access the xml doc, "parse" the dom, get to the values in the <td> tags, and write the table of data (from the xml file) to the targetDiv. Right now, nothing is happening when I click the input button, i.e., no errors, etc., nothing happens. Thanks for any help!



<html>
<head>
<title>Ajax at work</title>

<script language = "javascript">
var XMLHttpRequestObject = false;

var txt,x,xx,i;


if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();

} else if (window.ActiveXObject) {

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}


function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {

txt="<table

border='1'><tr><th>Score</th><th>Origin</th><th>Target</th><th>Target

Location</th><th>Purpose</th></tr>";


//document.write("XML document loaded into an XML DOM Object.");

x=xmlhttp.responseXML.documentElement.getElementsByTagName("<TD>");


for (i=0;i<x.length;i++)

{


txt=txt + "<tr>";

xx=x[i].getElementsByTagName("<TD>");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}
}

xx=x[i].getElementsByTagName("<td>");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}

}

txt=txt + "</tr>";

}

txt=txt + "</table>";
document.getElementById('targetDiv').innerHTML=txt;
}


}
}

XMLHttpRequestObject.send(null);
}
}
</script>
</head>

<body>


<H1>Fetching data...</H1>

<form>
<input type = "button" value = "Display Message"
onclick = "getData('http://localhost/IIQ/out_RSS_example2.xml', 'targetDiv')">
</form>

<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>


</body>
</html>

Logic Ali
10-31-2012, 08:04 PM
Right now, nothing is happening when I click the input button, i.e., no errors, etc., nothing happens.What do you mean 'no errors'? There at least two syntax errors that prevent anything working. USE THE ERROR CONSOLE.

Old Pedant
10-31-2012, 08:50 PM
And at least two usage errors, as well.

We *guarantee* you *ARE* getting errors...you are simply ignoring them.

mvandall
11-01-2012, 05:35 PM
First - thanks very much for the replies!!!

Ok, now using the error console and I was getting at least one syntax error - added a missing curly bracket. Now I'm getting the following error but I'm not sure why the function is null or undefined or not an object. I defined it in the head of the document, etc. The xml file which it points to is there on the localhost in the path specified, so not sure what's up.

SCRIPT5007: The value of the property 'getData' is null or undefined, not a Function object

BTW, can you recommend a good free dev environment?

Thanks!!!!
Michael

Logic Ali
11-01-2012, 05:58 PM
Show your code in its current state.

mvandall
11-01-2012, 07:16 PM
<html>
<head>
<title>Ajax at work</title>

<script language = "javascript">
var XMLHttpRequestObject = false;

var txt,x,xx,i;


if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();

} else if (window.ActiveXObject) {

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}


function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {

txt="<table border='1'><tr><th>Score</th><th>Origin</th><th>Target</th><th>Target Location</th><th>Purpose</th></tr>";


//document.write("XML document loaded into an XML DOM Object.");

x=xmlhttp.responseXML.documentElement.getElementsByTagName("<TD>");


for (i=0;i<x.length;i++)

{


txt=txt + "<tr>";

xx=x[i].getElementsByTagName("<TD>");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}
}

xx=x[i].getElementsByTagName("<td>");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}

}

txt=txt + "</tr>";

}

txt=txt + "</table>";
document.getElementById('targetDiv').innerHTML=txt;
}


}
}

XMLHttpRequestObject.send(null);
}
}
}
</script>
</head>

<body>


<H1>Fetching data...</H1>

<form>
<input type = "button" value = "Display Message"
onclick = "getData('http://localhost/IIQ/out_RSS_example2.xml', 'targetDiv')">
</form>

<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>


</body>
</html>

Old Pedant
11-01-2012, 09:42 PM
I think it would be more important to see the XML he is trying to load.

As his code is written, it makes no sense:

First, this line:


x=xmlhttp.responseXML.documentElement.getElementsByTagName("<TD>");
will get *ALL* the <TD> elements into the collection referenced by x.

But then this line

xx=x[i].getElementsByTagName("<TD>")

gets all the <TD> elements *INSIDE* of one of the <TD>s.

Now, I grant you that is possible.

XML such as:


<TD>
<TD>something</TD>
</TD>
<TD>
<TD>more stuff</TD>
</TD>

would allow that. But is that LIKELY?

I want to see the XML.

mvandall
11-02-2012, 04:36 PM
Ok, yes, my code may be a little screwy, but that's why I'm here :-) And, I do really appreciate the help!

Agreed, seeing the xml is probably a good idea, so I'm pasting it below..... I think it's not a "pretty" xml file or not formated as an xml data file should be, but it wasn't for me to choose. I just have to parse it and display the data in the tables (well, actually the contents of the whole file, but I'm starting with the data in the tables). Hopefully I can convince the client that they need to format the xml as xml data, etc.



<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-16">
<style type="text/css">
body { font: 12px Verdana }
tr.rowOdd {background-color: white}
tr.rowEven {background-color: #f5f5f5}
table th,
table td {
text-align: left;
border: 0px;
border-right:1px solid lightgrey;
padding: 0.2em 0.5em;
}
table th {
background-color: #f3f3f3;
border-bottom: 1px solid lightgrey;
}

table td.number {
text-align: right;
}
h1 { text-align: center; background-color:#f5f5f5 }
h2 { text-align: center; background-color:#f5f5f5 }

</style>
</head>
<body>
<h1 style="width: 100%;">Engine Results</h1>
<table border="0" cellpadding="3" cellspacing="0" style="width:100%">
<TR>
<TD><img src="images/out_RSS_example2.jpg" align="center"></TD>
<TD valign="top">
<h2>Query parameters</h2>
<table border="0" cellpadding="0" cellspacing="0" style="border:2px gray outset">
<TR><TD>Cincinnati</TD></TR>
<TR><TD>OIA</TD></TR>
<TR><TD>RT</TD></TR>
<TR><TD>
123456
987654
</TD></TR>
</table>
</TD>
<TD valign="top">
<h2>Best matches</h2>
<table id="Data" border="0" cellpadding="0" cellspacing="0" style="border:2px gray outset">
<tr>
<th>Score</th>
<th>Origin</th>
<th>Target</th>
<th>Target Location</th>
<th>Purpose</th>
</tr>
<tr class="rowOdd">
<TD class="number">150.0</TD>
<TD>Dallas</TD>
<TD>OIA</TD>
<TD>USA</TD>
<TD>BT</TD>
</tr>
<tr class="rowEven">
<TD class="number">150.0</TD>
<TD>Seatle</TD>
<TD>OIA</TD>
<TD>USA</TD>
<TD>BT</TD>
</tr>
<tr class="rowOdd">
<TD class="number">150.0</TD>
<TD>Denver</TD>
<TD>OIA</TD>
<TD>USA</TD>
<TD>BT</TD>
</tr>
<tr class="rowEven">
<TD class="number">150.0</TD>
<TD>New York</TD>
<TD>OIA</TD>
<TD>USA</TD>
<TD>PT</TD>
</tr>
<tr class="rowOdd">
<TD class="number">150.0</TD>
<TD>Chicago</TD>
<TD>OIA</TD>
<TD>USA</TD>
<TD>PT</TD>
</tr>
</table>
</TD>
</TR>
</table>
</body>
</html>

Old Pedant
11-02-2012, 08:52 PM
You know, there may be an easier way to do this.

Since that *IS* HTML, don't even try to treat it as XML.

Instead, put a HIDDEN <iframe> on your page and load the HTML in that <iframe>.

Then you can just use HTML DOM methods in your JS code to grab the relevant data out of the <iframe>!

mvandall
11-05-2012, 03:45 PM
True it is html and good/great suggestion! However, I have a couple objectives going on - 1st is to parse the file/data, but 2nd is to access xml on remote servers and parse the xml (albeit in this case html). I need to do both, access the file on a server, and parse it. I also have other objectives on the presentation or client-side, but right now, I'd like to pretend that this is an actual xml file on a server. Eventually my customer will produce an actual xml file (and I need to know how to do this in general), hopefully sooner rather than later.

So, wondering if you (all) can still help me figure out why my code isn't finding all the <td>'s and spitting them out onto the screen in the target div? The code is supposed to create an html table of the data in that xml(html) file.

Thanks again!
Michael

Logic Ali
11-05-2012, 06:46 PM
So, wondering if you (all) can still help me figure out why my code isn't finding all the <td>'s and spitting them out onto the screen in the target div? The code is supposed to create an html table of the data in that xml(html) file.

You still need to test it on valid XML.

"some.xml"

<xml>
<core>
<TD class="number">150.0</TD>
<TD>Dallas</TD>
<TD>OIA</TD>
<TD>USA</TD>
<TD>BT</TD>
</core>
</xml>Here's a simplified example that just creates a single row of TDs:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax</title>

<script type = "text/javascript">

function getData(dataSource, divID)
{
var rq = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
obj = document.getElementById(divID);

obj.innerHTML = "Fetching data..." ;

rq.open("GET", dataSource);

rq.onreadystatechange = function()
{
var tdGroup,
tbl = document.createElement( 'table' ),
row,
cell;

tbl.appendChild( document.createElement( 'tbody' ).appendChild( row = document.createElement( 'tr' ) ) );

if( this.readyState == 4 && this.status == 200 )
{
tdGroup = rq.responseXML.getElementsByTagName( 'TD' );

obj.innerHTML = '<p>';

obj.appendChild( tbl );

for( var i = 0; tdGroup[ i ]; i++ )
{
row.appendChild( cell = document.createElement( 'td' ) );
cell.appendChild( document.createTextNode( tdGroup[ i ].firstChild.nodeValue ) );
cell.style.backgroundColor = i&1 ? '#0f0' : '#0ff';
}
}
}

rq.send(null);
}
</script>
</head>

<body>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('some.xml', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

Old Pedant
11-05-2012, 08:34 PM
Also, if by "remote servers" you mean servers OTHER than the one where the HTML page is running, you can't do that with JavaScript. JavaScript only allows you to access data from the SAME DOMAIN as the page running the script.

You would need to set up a proxy server on your own domain that fetched the remote data for you. Not hard to do, but can't be done with JS.

mvandall
11-09-2012, 04:19 PM
Ok, sorry for the delay.....life etc., but i tried the code you provided and unfortunately it didn't work. The console reports that it's missing a ";" but I don't see where it should be - I mean, it looks like all of the ';' are in the right place.

???

Michael

P.S. Thanks for the heads-up on accessing other servers via js!

Old Pedant
11-09-2012, 10:11 PM
LogicAli's code in post #11 worked perfectly first time when I tried it.

Did you copy/paste it or type it in?

To get usable copyable code from this silly forum, hit the "Quote" button on post #11 and then copy from the edit window that quotes the code.

mvandall
11-13-2012, 06:02 PM
Success! Got it to work! Copy and pasted from the quote/editor. I had to edit the path to the data file to: "http://localhost/IIQ/some.xml".... Why would I have to specify the specific path if the the file, some.xml, was in the same directory as the index.html?

Will this code work on my original file that isn't formatted as xml (i.e., it's just html)? (I'll try it and see.) If you think it won't work, what can I do to get my original code to read the html file - basically to do what you did with this xml file?

As always, thank you all!

Michael

Old Pedant
11-13-2012, 08:35 PM
HTML is not XML.

You *can* have XHTML that is XML-compatible, though.

But there are many rules in XML that are not necessarily followed in HTML.

If you use XHTML in strict mode and validate it (say with the w3c validator) *then* you can probably treat it as XML for the purposes of this usage.

mvandall
11-13-2012, 08:52 PM
Understood re: html not being xml. In terms of using xhtml, is there an easy way to convert an html file to an xhtml file?

Old Pedant
11-13-2012, 10:51 PM
Well, to begin with, all tags should be lower case. <td> instead of <TD>.

And all properties MUST be enclosed in quotes, not apostrophes. <td class="whatever"> and not either <td class=whatever> or <td class='whatever'>.

& should be written &amp; (because the & alone looks like the start of the &amp; entity), etc.

Once you have converted the HTML, use the w3c validator to make sure it validates as strict XHTML.

If you have any errors, it will tell you about them so you can easily fix them and try again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum