By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,598 Members | 1,894 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,598 IT Pros & Developers. It's quick & easy.

Problems with XML & JavaScript

P: n/a
I am developing a page for Mozilla/IE which reads xml data and when the
link on the page is clicked it displays the data as a table.
The display is controlled by a Javascript. Everything works fine. But
in the table one of the sections is a URL. I want this to be clickable
so that it takes me to the corresponding webpage. I am new to this and
tried hard to fix this but cudnt find my way around. I tried adding an
xsl sheet but still it doesnt seem to fix the problem.
Could anyone help me out. I have pasted the code below

Thanks a lot

***XML*****

<?xml version="1.0" encoding="ISO-8859-1"?>
<logs>
<Websites>
<title>Google</title>
<country>US</country>
<URL>http://www.google.com</URL>
</Websites>

<Websites>
<title>CNN</title>
<country>US</country>
<URL>http://www.cnn.com</URL>
</Websites>

</logs>
***HTML*******
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">

function linksXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {if (xmlDoc.readyState == 4)
createTable()};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("google.xml");
}

function createTable()

{

var x = xmlDoc.getElementsByTagName('Websites');
var newEl = document.createElement('TABLE');
newEl.setAttribute('cellPadding',5);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
for (j=0;j<x[0].childNodes.length;j++)
{
if (x[0].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TH');
var theData = document.createTextNode(x[0].childNodes[j].nodeName);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TD');
var theData =
document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
}
document.getElementById('writeroot1').appendChild( newEl);

}
</script>
</head>
<body>

<a href="javascript:linksXML()">Test</a>

<p id="writeroot1" style="background-color: green;">
</p>

</body>
</html>

Sep 29 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


ar*******@yahoo.com wrote:
I am developing a page for Mozilla/IE which reads xml data and when the
link on the page is clicked it displays the data as a table.
The display is controlled by a Javascript. Everything works fine. But
in the table one of the sections is a URL. I want this to be clickable
so that it takes me to the corresponding webpage.


"clickable"? So you want a link in the HTML document?
var link = document.createElement('a');
link.href = 'http://example.com/';
link.appendChild(document.createTextNode('http://example.com/'));
// now append the link element to some other element e.g.
document.body.appendChild(link);
--

Martin Honnen
http://JavaScript.FAQTs.com/
Sep 29 '05 #2

P: n/a
I guess I wasnt being clear. My Xml file has a URL tag. For example say
http://www.google.com. And in the html page when the page loads up
there is a linked text called 'Test'. So when the link 'Test' is
clicked the JavaScript takes the XML table and displays in the html
page. And the URL is simply displayed as a text and not as a link. Its
this link that i want it to be clicked . So when i click the 'Test'
link on the page and when it displays the table on the page, the tag
URL from the XML page needs to be clickable..

Thanks a lot Martin. I appreciate your help


Martin Honnen wrote:
ar*******@yahoo.com wrote:
I am developing a page for Mozilla/IE which reads xml data and when the
link on the page is clicked it displays the data as a table.
The display is controlled by a Javascript. Everything works fine. But
in the table one of the sections is a URL. I want this to be clickable
so that it takes me to the corresponding webpage.


"clickable"? So you want a link in the HTML document?
var link = document.createElement('a');
link.href = 'http://example.com/';
link.appendChild(document.createTextNode('http://example.com/'));
// now append the link element to some other element e.g.
document.body.appendChild(link);
--

Martin Honnen
http://JavaScript.FAQTs.com/


Sep 29 '05 #3

P: n/a
ar*******@yahoo.com wrote:
I guess I wasnt being clear. My Xml file has a URL tag. For example say
http://www.google.com. And in the html page when the page loads up
there is a linked text called 'Test'. So when the link 'Test' is
clicked the JavaScript takes the XML table and displays in the html
page. And the URL is simply displayed as a text and not as a link. Its
this link that i want it to be clicked . So when i click the 'Test'
link on the page and when it displays the table on the page, the tag
URL from the XML page needs to be clickable..


Don't top-post, it discourages replies - reply below quoted text.

As you loop through the elements of your XML file, test to see if you
are handling a URL element. If so, add it as an A element using the
method demonstrated by Martin. Otherwise, add text element.

You may want to create separate functions to do that, say toss a
'createA' function a URL and label and get back a ready to go element.

Something like the following should work:

...
tmp.appendChild(row);
// Keep i local
for (var i=0; i<x.length; i++)
{
var row = document.createElement('TR');
// Keep j local
for (var j=0; j<x[i].childNodes.length; j++) {
var theNode = x[i].childNodes[j];

if (theNode.nodeType == 1) {
if ('URL' == theNode.nodeName) {
var theData = document.createElement('a');
theData.href = theNode.firstChild.nodeValue;
theData.appendChild(
document.createTextNode(theNode.firstChild.nodeVal ue));
} else {
var theData =
document.createTextNode(theNode.firstChild.nodeVal ue);
}
var container = document.createElement('td');
container.appendChild(theData);
row.appendChild(container);
}
}
tmp.appendChild(row);
}
document.getElementById('writeroot1').appendChild( newEl);
...

A few tips:
- declare variables at the start, don't initialise them on every loop
- use variables to hold values rather than make repeated calls to the
document
- make sure counters (i, j, etc.) are *always* local variables,
otherwise you may get very strange results.
- don't use 'continue' (it's removed from the snippet above) - it makes
the logic less clear and hence less maintainable. Use a normal if
block.

If you are using this purely for your own web page, consider JSON
instead of XML. It puts a lot more power in the hands of whoever writes
the data file so you just mess with the data file rather than the file
and the parser.

<URL:http://www.crockford.com/JSON/index.html>

Stay away from XSL/XSLT on the client.

[...]
--
Rob
Sep 30 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.