Jqtouch error when using XML

myhot · #1 (**permalink**) 07-07-11, 04:04 AM

I want to use XML to dynamic generate a menu using jqtouch. But it don't work. Anyone can help??????????

My target is display same result as this static page

<html>
<head>
<title>Books Store</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = new $.jQTouch();
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Book Store</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#books">Books</a></li>
<li class="arrow"><a href="#contactus">Contactus</a></li>
</ul>
</div>
<div id="books">
<div class="toolbar">
<h1>Books</h1>
<a class="button back" href="#">Back</a>
</div>
<p>We are a US-based organization providing a wide variety of books at a
reasonable price</p>
</div>
<div id="contactus">
<div class="toolbar">
<h1>Contact Us</h1>
<a class="button back" href="#">Back</a>
</div>
<p>XYZ Book Company</p>
<p>11 Books Street, NY, NY 10012 </p>
<p>USA</p>
</div>
</body>
</html>

I want to make the menu changed based on XML. therefore, i change the above one to 2 parts.

HTML:

<html>
<head>
<title>Books Store</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">

var jQT = new $.jQTouch();
var xhr =new XMLHttpRequest();
xhr.open("GET","text.xml",true);
xhr.send();
var txt1=" <div class=\"toolbar\"><h1>CLC Plus</h1></div><ul class=\"edgetoedge\">";
var txt2="";

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
xmlDoc=xhr.responseXML;
x=xmlDoc.getElementsByTagName("name");
y=xmlDoc.getElementsByTagName("desc");

for (i=0;i<x.length;i++)
{
txt1=txt1 + "<li class=\"arrow\"><a href=\"#" + x[i].firstChild.nodeValue + "\">" + x[i].firstChild.nodeValue + "</a></li>";

txt2=txt2 + "<div id=\"" +x[i]. firstChild.nodeValue + "</div><div class=\"toolbar\" align=right><h1>"+ x[i].firstChild.nodeValue+"</h1><a class=\"button back\" href=\"#\">Back</a></div><p>"+ y[i].firstChild.nodeValue+"</p>";
txt2 = txt2 + "</div>";
}
txt1=txt1 + "</ul>";
document.getElementById('home').innerHTML = txt1;
document.getElementById('content').innerHTML = txt2;

}
}
</script>

<body>
<div id="home" class="current">
</div>
<div id="content">
</div>
</body>
</html>

XML:

<?xml version="1.0" ?>
<company>
<name>Books</name><desc>We are a US-based organization providing a wide variety of books at a reasonable price</desc>
<name>Contactus</name><desc><p>XYZ Book Company</p><p>11 Books Street, NY, NY 10012 </p><p>USA</p></desc>
</company>