PDA

View Full Version : XML and SPRY Accordion.


frankfrank
21 Dec 2010, 05:31 AM
Hey.
I have been trying to learn how to pull data from an XML file into a spry widget (accordion in this case) and it just does not seem to work for me.

My practice subject is a TV show and what I want it to do is display the season in the "AccordionPanelTab" and repeat the episode number and title in the "AccordionPanelContent". I also want the "AccordionPanelTab" to repeat when a new season number is added. (Is that possible)? Here is a diagram I made to help explain:

http://img844.imageshack.us/img844/9527/spry.gif

Here is my code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
var dsTvShow = new Spry.Data.XMLDataSet ("mentalist.xml", "tvShow/show");
</script>
<link href="SpryAssests/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="accWrap">
<div id="Accordion1" class="Accordion" tabindex="0" spry:region="dsTvShow">
<div class="AccordionPanel">
<div class="AccordionPanelTab" spry:repeat="dsTvShow">{season}</div>
<div class="AccordionPanelContent" spry:repeat="dsTvShow">{ep}-{title}</div>
</div>
</div>
</div>



<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>

XML:

<?xml version="1.0" encoding="utf-8"?>
<tvShow>
<show name="The Mentalist" season="Season 1" index="0">
<season>1</season>
<ep>1</ep>
<title>Pilot</title>
<date>12/03/91</date>
<desc><![CDATA[California Bureau of Investigation consultant Thomas Jane along with Senior Agent Teresa Lisbon and her team, investigate a double murder in which a pro golfer's wife and her doctor were killed in Palm Springs.']]></desc>
</show>
<show name="The Mentalist" season="Season 1" index="1">
<ep>2</ep>
<title>Red Hair and Silver Tape</title>
<date>21/03/91</date>
<desc><![CDATA[Lisbon and the team investigate the death of a waitress in Napa Valley as Patrick decides to take matters into his own hands by going undercover.]]></desc>
</show>
</tvShow>

And here is the result... http://xmlspryhelp.net23.net/

I hope someone can help me out :)

Thanks!
-Frank
tommycl
23 Dec 2010, 12:19 PM
<script>
$(document).ready(function() {

$("#getData").ready(function(){

var data = "";

/* change the $.get to "the.xml" when that is setup */


$.get("the.xml", function(theXML){

$('person',theXML).each(function(i){

var firstname = $(this).find("name").text();
var age = $(this).find("age").text();
var gender = $(this).find("sex").text();
var surname = $(this).find("age").text();

var table = "<br>";
var end = "</tr></table>";


var location = $(this).find("location").text();
var relationship = $(this).find("relationship").text();
var interested = $(this).find("interested").text();
var picture = $(this).find("picture").text();


data = data + table + "<link href='./getstyle.css' rel='stylesheet' type='text/css'><div class='message' id='message'><div class='who'><div class='thumb' style='float:left; margin-right: 6px; width:50px; height:50px; background-repeat: no-repeat; background-position: center center;'><img src='../photos/"+ picture +"' width='55px' height='55px'></div>" + firstname + "</a><br /><span>" + age + "<br>" + gender + "</span></div><div class='preview'$readStyle>" + location + "<br />" + relationship + "<br />country</div><div class='record' id='record' style='float:right; padding-top: 20px; background-position: center center;'><input name='sa' type='checkbox' value='v'></div></div>";
});

$("#invite").html(data);
});
$('#invite').html('<p><img src="./ajax-loader.gif" width="220" height="19" /></p>')
});
});
function checkAll( el, tick ) {
var els = el.form.elements;
var x, i = els.length;
while ( i-- ) {
x = els[i];
if ( 'input' == x.nodeName.toLowerCase() &&
'checkbox' == x.type ) {
x.checked = tick;
}
}
}

function checkThis( el ) {
checkAll( el, false );
el.checked = true;
}
</script>
<html>
<head>
<title>The HTML</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
</head>
<body>
<table><tr>
<div id="container"></div>
</body>
<tr></table>
</html>

need to edit js to suit you