PDA

View Full Version : XML Display using javascript help

edub187
07-30-2009, 04:07 PM
Hi guys,
I am a new member/new poster, so hopefully my format and explanation are acceptable. I am having a problem displaying my XML data. I have a page, with three tabs. The three tabs are linked to an xml file that I want to display in a div tag (id="content"). The tabs us an external js file to call the xml file. It calls the file correctly, but loses all style and format associated with it via it's XSL stylesheet. It just shows up as a big block of text. I have tested in both IE and Firefox.
I have posted in this thread the code for all the pages I am using, including the main.html page, the ahah.js page, the ucedd_tab.xml page and it's associated stylesheet, ucedd_tab.xsl.
I really appreciate any help you guys might be able to toss my way. Thanks again.


<!-- Main.html: -->

<html>
<head>
<title></title>
<script language="javascript" src="ahah.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//Get all the elements of the given classname of the given tag.
function getElementsByClassName(classname,tag) {
if(!tag) tag = "*";
var anchs = document.getElementsByTagName(tag);
var total_anchs = anchs.length;
var regexp = new RegExp('\\b' + classname + '\\b');
var class_items = new Array()

for(var i=0;i<total_anchs;i++) { //Go thru all the links seaching for the class name

var this_item = anchs[i];
if(regexp.test(this_item.className)) {
class_items.push(this_item);
}
}
return class_items;
}

function load(name) {
ahah(name+".xml","content");
if(getElementsByClassName('here')[0])
getElementsByClassName('here')[0].className="";
document.getElementById(name).className="here";
}
</script>
<style type="text/css">Style Sheet Info Here</style>
</head>
<body>
<div id="tabs">
<ul>
<li id="ucedd3"><a href="javascript:load('ucedd3');">UCEDD</a></li>
<li id="ahah"><a href="javascript:load('ahah');">AHAH</a></li>
<li id="javascript"><a href="javascript:load('javascript');">JavaScript</a></li>
</ul>
</div>

<div id="content">
<br /><br /><br />
</div>

<div id="footnotes">
Links to used files : <a href="ajax.html">AJAX</a>,<a href="ahah.html">AHAH</a> and <a href="javascript.html">JavaScript</a>
<br /><br />

Created as a proof of concept code for AHAH programming methord. This page is published as the example for
<a href="index.php">AHAH - Asychronous HTML and HTTP</a>
</div>
</body>
</html>

<!-- ahah.js -->:

// JavaScript Document
function ahah(url, target) {
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}

<!-- ucedd_tab.xml -->

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="ucedd_tab.xsl" type="text/xsl"?>
<states>
<alabama id="AL">
<id>AL</id>
<state_name>ALABAMA University Center on DD</state_name>
<name1>Civitan International Research Center</name1>
<name2>University of Alabama at Birmingham</name2>
<street>1719 Sixth Avenue South (Location)</street>
<street2>CIRC 137, 1530 Third Avenue South (Mailing Address)</street2>
<city>Birmingham</city>
<st>AL</st>
<zip>35294-0021</zip>
<phone>Phone: 205.934.8900</phone>
<fax>Fax: 205.975.6330</fax>
<email href="#">#</email>
<url href="#">#</url>

<url2 href="#">#</url2>

<director_name>NA</director_name>

<director_email href="mailto:#">EMail: #</director_email>

</alabama>

<alaska id="AK">

<id>AK</id>

<state_name>Alaska University Center on DD</state_name>
<name1>Center for Human Development</name1>
<name2>University of Alaska Anchorage</name2>
<street>2703 Gambell Street</street>
<street2>Suite 103</street2>
<city>Anchorage</city>
<st>AK</st>
<zip>99503</zip>
<phone>Phone: 907.272.8270</phone>
<fax>Fax: 907.274.4802</fax>
<url href="#">#</url>
<director_name>#</director_name>
<director_email href="mailto:#">#</director_email>
</alaska>
<arizona1 id="AZ">
<id>AZ</id>
<state_name>Arizona University Centers on DD</state_name>
<name1>Northern Arizona University</name1>
<name2>Institute for Human Development</name2>
<street>P.O. Box 5630</street>
<city>Flagstaff</city>
<st>AZ</st>
<zip>86011-5630</zip>
<phone>Phone: 928.523.4791</phone>
<tty>TTY: 928.523.1695</tty>
<url href="#">#</url>
<director_name>#</director_name>
<director_email href="mailto:#">#</director_email>
</arizona1>
<arizona2 id="AZ2">
<id>AZ</id>
<state_name>Sonoran UCEDD</state_name>
<name1>University of Arizona</name1>
<name2>Department of Family and Community Medicine</name2>
<street>1521 E. Helen St.</street>
<street2>P.O. Box 245052</street2>
<city>Tucson</city>
<st>AZ</st>
<zip>85724</zip>
<phone>Phone: 520.626.0442</phone>
<url href="#">#</url>
<director_name>#</director_name>
<director_email href="mailto:#">#</director_email>
</arizona2>
</states>


<!-- ucedd_tab.xsl -->:

<?xml version="1.0" encoding="iso-8859-1"?><!-- DWXMLSource="ucedd_tab.xml" --><!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp "*">
<!ENTITY copy "©">
<!ENTITY reg "®">
<!ENTITY trade "™">
<!ENTITY mdash "—">
<!ENTITY ldquo "“">
<!ENTITY rdquo "”">
<!ENTITY pound "£">
<!ENTITY yen "¥">
<!ENTITY euro "€">
]>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>UCEDD</title>
</head>
<body>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<a name="top"></a>
<p><center><b>Listing of University Centers</b></center></p>
</td>
</tr>
<tr>
<td valign="top">
<table align="center" width="100%">
<tr valign="top">
<th align="left" scope="col" width="100"><strong>State</strong></th>
<th align="left" scope="col"><strong>Address</strong></th>
<th align="left" scope="col"><strong>Phone Numbers and Web Addresses</strong></th>
<th align="left" scope="col"><strong>Director</strong></th>
</tr>
<tr valign="top">
<td valign="top" width="100"><a name="al"></a><strong><xsl:value-of select="states/alabama/id"/></strong></td>
<td valign="top" width="300"><xsl:value-of select="states/alabama/state_name"/><br />
<xsl:value-of select="states/alabama/name1"/><br />
<xsl:value-of select="states/alabama/name2"/><br />
<xsl:value-of select="states/alabama/street"/><br />
<xsl:value-of select="states/alabama/street2"/><br />
<xsl:value-of select="states/alabama/city"/>, <xsl:value-of select="states/alabama/st"/>&nbsp;<xsl:value-of select="states/alabama/zip"/><br />
<br /></td>
<td valign="top" width="300"><xsl:value-of select="states/alabama/phone"/><br />
<xsl:value-of select="states/alabama/fax"/><br />
EMail: <a href="{states/alabama/email/@href}"><xsl:value-of select="states/alabama/email"/></a><br />
URL: <a href="{states/alabama/url/@href}"><xsl:value-of select="states/alabama/url"/></a><br />
URL2: <a href="{states/alabama/url2/@href}"><xsl:value-of select="states/alabama/url2"/></a></td>
<td valign="top" width="300"><xsl:value-of select="states/alabama/director_name"/><br />
EMail: <a href="{states/alabama/email/@href}"><xsl:value-of select="states/alabama/email"/></a></td>
</tr>
<tr valign="top">
<td valign="top" width="100"><a name="ak"></a><strong><xsl:value-of select="states/alaska/id"/></strong></td>
<td valign="top" width="300"><xsl:value-of select="states/alaska/state_name"/><br />
<xsl:value-of select="states/alaska/name1"/><br />
<xsl:value-of select="states/alaska/name2"/><br />
<xsl:value-of select="states/alaska/street"/><br />
<xsl:value-of select="states/alaska/street2"/><br />
<xsl:value-of select="states/alaska/city"/>, <xsl:value-of select="states/alaska/st"/>&nbsp;<xsl:value-of select="states/alaska/zip"/><br />
<br /></td>
<td valign="top" width="300"><xsl:value-of select="states/alaska/phone"/><br />
<xsl:value-of select="states/alaska/fax"/><br />URL: <a href="{states/alaska/url/@href}"><xsl:value-of select="states/alaska/url"/></a></td>
<td valign="top" width="300"><xsl:value-of select="states/alaska/director_name"/><br />EMail: <a href="{states/alaska/director_email/@href}"><xsl:value-of select="states/alaska/director_email"/></a></td>
</tr>
<tr valign="top">
<td valign="top" width="100"><a name="az"></a><strong><xsl:value-of select="states/arizona1/id"/></strong></td>
<td valign="top" width="300"><xsl:value-of select="states/arizona1/state_name"/><br />
<xsl:value-of select="states/arizona1/name1"/><br />
<xsl:value-of select="states/arizona1/name2"/><br />
<xsl:value-of select="states/arizona1/street"/><br />
<xsl:value-of select="states/arizona1/city"/>, <xsl:value-of select="states/arizona1/st"/>&nbsp;<xsl:value-of select="states/arizona1/zip"/><br />
<br /></td>
<td valign="top" width="300"><xsl:value-of select="states/arizona1/phone"/><br />
<xsl:value-of select="states/arizona1/tty"/><br />URL: <a href="{states/arizona1/url/@href}"><xsl:value-of select="states/arizona1/url"/></a></td>
<td valign="top" width="300"><xsl:value-of select="states/arizona1/director_name"/><br />EMail: <a href="{states/arizona1/director_email/@href}"><xsl:value-of select="states/arizona1/director_email"/></a></td>
</tr>
<tr valign="top">
<td valign="top" width="100"><strong><xsl:value-of select="states/arizona2/id"/></strong></td>
<td valign="top" width="300"><xsl:value-of select="states/arizona2/state_name"/><br />
<xsl:value-of select="states/arizona2/name1"/><br />
<xsl:value-of select="states/arizona2/name2"/><br />
<xsl:value-of select="states/arizona2/street"/><br />
<xsl:value-of select="states/arizona2/street2"/><br />
<xsl:value-of select="states/arizona2/city"/>, <xsl:value-of select="states/arizona2/st"/>&nbsp;<xsl:value-of select="states/arizona2/zip"/><br />
<br /></td>
<td valign="top" width="300"><xsl:value-of select="states/arizona2/phone"/><br />
URL: <a href="{states/arizona2/url/@href}"><xsl:value-of select="states/arizona2/url"/></a></td>
<td valign="top" width="300"><xsl:value-of select="states/arizona2/director_name"/><br />EMail: <a href="{states/arizona2/director_email/@href}"><xsl:value-of select="states/arizona2/director_email"/></a></td>
</tr>
<tr>
<td colspan="4"><a href="#top">Back to the Top</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>