siukeung13 years, 4 months ago
in joomla, i want to write a function for joomla. I 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>
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>