XML and SPRY Accordion.

**frankfrank** · 21 Dec 2010, 04: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:

Here is my code:

HTML:

HTML Code:

<!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:

HTML Code:

<?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, 11:19 AM

PHP Code:


<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

Thread: XML and SPRY Accordion.

Thread Tools

XML and SPRY Accordion.

Similar Threads

Accordion Menu

accordion script

Spry Accordion

C++ source code to compare XML files like ExamXML XML differencing tool

Appending New XML To An XML File With PHP

Posting Permissions