Skip navigation
TechDan
Currently Being Moderated

Spry filter help

Jul 11, 2012 1:58 PM

Tags: #spry #xml #dataset #filter #date_picker

Ok so I have created a Spry data set:

 

 

<div spry:region="ds1" class="SpotlightAndStacked">

    <div spry:repeat="ds1" class="SpotlightAndStackedRow">

      <div class="SpotlightContainer">

        <div class="SpotlightColumn"> {picture}</div>

      </div>

      <div class="StackedContainer">

                <div class="StackedColumn"> {name}</div>

                <div class="StackedColumn"> {type}</div>

                <div class="StackedColumn"> {button}</div>

      </div>

      <br style="clear:both; line-height: 0px" />

    </div>

  </div>

 

and here is the xml:

 

<?xml version="1.0" encoding="utf-8"?>

<artists>

<artist>

<name>Smooth Criminals</name>

<picture><![CDATA[<a href="smooth-criminals.html"><img src="images/smoothcriminals/mainxsml.jpg" alt="thumb1"></a>]]></picture>

<type>Wedding and Corporate</type>

<button><![CDATA[<a href="smooth-criminals.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>

</artist>

<artist>

<name>The Supersets</name>

<picture><![CDATA[<a href="the-super-sets.html"><img src="images/supersets/mainxsml.jpg" alt="thumb1"></a>]]></picture>

<type>Wedding and Corporate</type>

<button><![CDATA[<a href="the-super-sets.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>

</artist>

<artist>

<name>The Groove Monsters</name>

<picture><![CDATA[<a href="the-groove-monsters.html"><img src="images/fallguys/mainxsml.jpg" alt="thumb1"></a>]]></picture>

<type>Wedding and Corporate</type>

<button><![CDATA[<a href="the-groove-monsters.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>

</artist>

<artist>

<name>Straziante</name>

<picture><![CDATA[<a href="straziante.html"><img src="images/straziante/mainxsml.jpg" alt="thumb1"></a>]]></picture>

<type>Wedding and Corporate</type>

<button><![CDATA[<a href="straziante.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>

</artist>

<artist>

<name>The Beat Factor</name>

<picture><![CDATA[<a href="the-beat-factor.html"><img src="images/beatfactor/mainxsml.jpg" alt="thumb1"></a>]]></picture>

<type>Wedding and Corporate</type>

<button><![CDATA[<a href="the-beat-factor.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>

</artist>

</artists>

 

 

I would like to have a date picker which selects a date and then filters out which artist is available on that date. I would also like to put a search on the homepage (which is a seperate page to where the data set is on) which has the date option but also has a drop down to select what type of artist the user wants, eg. "wedding and corporate" or "Tribute acts"

 

Any help would be much appreciated

 
Replies
  • Currently Being Moderated
    Jul 11, 2012 6:00 PM   in reply to TechDan

    You will need a second XML file that shows the date and the artist. Then, when the calendar date is clicked, you can use the onclick event to filter out the dates that are not relevant. The filtering is probably best achieved by using the xPath method as in http://labs.adobe.com/technologies/spry/samples/data_region/XPathFilte ringSample.html

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 4:26 PM   in reply to TechDan

    I think it is easier to enter a load of dates of which the artist is booked.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2012 6:43 PM   in reply to TechDan

    Change the xml from

    <artist>

      <name>Smooth Criminals</name>

      <datesbooked>2012-08-05,2012-08-25,2012-09-12</datesbooked>

    </artist>

    to

    <artist>

      <name>Smooth Criminals</name>

      <datesbooked>

        <datebooked>2012-08-05</datebooked>

        <datebooked>2012-08-25</datebooked>

        <datebooked>2012-09-12</datebooked>

      </datesbooked>

    </artist>

    and look at nested datasets http://labs.adobe.com/technologies/spry/samples/data_region/NestedXMLD ataSample.html

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2012 7:01 PM   in reply to TechDan

    Try artistsearch.xml


    <?xml version="1.0" encoding="utf-8"?>
    <artists>
        <artist>
            <name>Smooth Criminals</name>
            <picture><![CDATA[<a href="smooth-criminals.html"><img src="images/smoothcriminals/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="smooth-criminals.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-05</datebooked>
                <datebooked>2012-08-25</datebooked>
                <datebooked>2012-09-12</datebooked>
            </datesbooked>
        </artist>
        <artist>
            <name>The Supersets</name>
            <picture><![CDATA[<a href="the-super-sets.html"><img src="images/supersets/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="the-super-sets.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-02</datebooked>
                <datebooked>2012-08-15</datebooked>
                <datebooked>2012-09-28</datebooked>
            </datesbooked>
        </artist>
        <artist>
            <name>The Groove Monsters</name>
            <picture><![CDATA[<a href="the-groove-monsters.html"><img src="images/fallguys/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="the-groove-monsters.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-24</datebooked>
                <datebooked>2012-08-14</datebooked>
                <datebooked>2012-09-04</datebooked>
            </datesbooked>
        </artist>
        <artist>
            <name>Straziante</name>
            <picture><![CDATA[<a href="straziante.html"><img src="images/straziante/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="straziante.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-18</datebooked>
                <datebooked>2012-08-17</datebooked>
                <datebooked>2012-09-05</datebooked>
            </datesbooked>
        </artist>
        <artist>
            <name>The Beat Factor</name>
            <picture><![CDATA[<a href="the-beat-factor.html"><img src="images/beatfactor/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="the-beat-factor.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-17</datebooked>
                <datebooked>2012-08-21</datebooked>
                <datebooked>2012-09-26</datebooked>
            </datesbooked>
        </artist>
    </artists>
    

     

    and

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SprySpotlightColumn.css" rel="stylesheet">
    <link href="SpryAssets/SpryStackedContainers.css" rel="stylesheet">
    <script src="SpryAssets/xpath.js"></script>
    <script src="SpryAssets/SpryData.js"></script>
    <script src="SpryAssets/SpryNestedXMLDataSet.js"></script>
    <script>
    var dsArtists = new Spry.Data.XMLDataSet("artistsearch.xml", "artists/artist");
        dsArtists.setColumnType("picture", "html");
        dsArtists.setColumnType("button", "html");
    var dsDates = new Spry.Data.NestedXMLDataSet(dsArtists, "datesbooked/datebooked");
    </script>
    </head>
    
    <body>
    <div spry:region="dsArtists dsDates" class="SpotlightAndStacked">
      <div spry:repeat="dsArtists" class="SpotlightAndStackedRow">
        <div class="SpotlightContainer">
          <div class="SpotlightColumn"> {dsArtists::name}</div>
        </div>
        <div class="StackedContainer">
          <div class="StackedColumn"> {dsArtists::picture}</div>
          <div class="StackedColumn"> {dsArtists::type}</div>
          <div class="StackedColumn"> {dsArtists::button}</div>
          <div spry:repeat="dsDates" class="StackedColumn"> {dsDates::datebooked}</div>
        </div>
        <br style="clear:both; line-height: 0px" />
      </div>
    </div>
    </body>
    </html>

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 6:26 AM   in reply to TechDan

    I have had a good look (about 4 hours) at solving the problem and decided that there is an easier way to achieve the filtering without destroying the data in the dataset as would be the case when using xPath filtering.

     

    Once the main data has been loaded, this needs to be done to be able to select the region, we will load dsDates and apply a function to each date that will hide the entry in the main region if the date is the same as a selected date.

     

    1. We need to identify a record by giving each artist an ID as in

     

    <?xml version="1.0" encoding="utf-8"?>
    <artists>
        <artist id='1'>
            <name>Smooth Criminals</name>
            <picture><![CDATA[<a href="smooth-criminals.html"><img src="images/smoothcriminals/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="smooth-criminals.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-05</datebooked>
                <datebooked>2012-08-25</datebooked>
                <datebooked>2012-09-12</datebooked>
            </datesbooked>
        </artist>
        <artist id='2'>
            <name>The Supersets</name>
            <picture><![CDATA[<a href="the-super-sets.html"><img src="images/supersets/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="the-super-sets.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-02</datebooked>
                <datebooked>2012-08-15</datebooked>
                <datebooked>2012-09-28</datebooked>
            </datesbooked>
        </artist>
        <artist id='3'>
            <name>The Groove Monsters</name>
            <picture><![CDATA[<a href="the-groove-monsters.html"><img src="images/fallguys/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="the-groove-monsters.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-24</datebooked>
                <datebooked>2012-08-14</datebooked>
                <datebooked>2012-09-04</datebooked>
            </datesbooked>
        </artist>
        <artist id='4'>
            <name>Straziante</name>
            <picture><![CDATA[<a href="straziante.html"><img src="images/straziante/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="straziante.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-18</datebooked>
                <datebooked>2012-08-17</datebooked>
                <datebooked>2012-09-05</datebooked>
            </datesbooked>
        </artist>
        <artist id='5'>
            <name>The Beat Factor</name>
            <picture><![CDATA[<a href="the-beat-factor.html"><img src="images/beatfactor/mainxsml.jpg" alt="thumb1"></a>]]></picture>
            <type>Wedding and Corporate</type>
            <button><![CDATA[<a href="the-beat-factor.html"><img src="images/viewprofile.png" alt="thumb1"></a>]]></button>
            <datesbooked>
                <datebooked>2012-08-17</datebooked>
                <datebooked>2012-08-21</datebooked>
                <datebooked>2012-09-26</datebooked>
            </datesbooked>
        </artist>
    </artists>
    

     

    2. Apply the ID to the region so that we can uniquely identify it.

    3. Create a second region that that tests the dates

    4. Create a function that hides the relevant artist if he is already booked for that date.

     

    The markup will look like

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SprySpotlightColumn.css" rel="stylesheet">
    <link href="SpryAssets/SpryStackedContainers.css" rel="stylesheet">
    <script src="SpryAssets/xpath.js"></script>
    <script src="SpryAssets/SpryData.js"></script>
    <script src="SpryAssets/SpryNestedXMLDataSet.js"></script>
    <script>
    var dsArtists = new Spry.Data.XMLDataSet("artistsearch.xml", "artists/artist");
        dsArtists.setColumnType("picture", "html");
        dsArtists.setColumnType("button", "html");
    var dsDates = new Spry.Data.NestedXMLDataSet(dsArtists, "datesbooked/datebooked");
    </script>
    <style>
    .hidden {display: none;}
    </style>
    </head>
    
    <body>
    <div id="dataRegion" spry:region="dsArtists" class="SpotlightAndStacked">
      <div id="id{@id}" spry:repeat="dsArtists" class="SpotlightAndStackedRow">
        <div class="SpotlightContainer">
          <div class="SpotlightColumn"> {dsArtists::name}</div>
        </div>
        <div class="StackedContainer">
          <div class="StackedColumn"> {dsArtists::picture}</div>
          <div class="StackedColumn"> {dsArtists::type}</div>
          <div class="StackedColumn"> {dsArtists::button}</div>
        </div>
        <br style="clear:both; line-height: 0px" />
      </div>
    </div>
    <div spry:region="dsArtists dsDates">
      <div spry:repeat="dsArtists">
        <div spry:repeat="dsDates"> 
          <div spry:if="function::checkDate">{dsDates::datebooked}</div>
        </div>
      </div>
    </div>
    <script>
    var chosenDate = '2012-08-17';
    function checkDate(rgn, doIt) {
        if (doIt('{dsDates::datebooked}') == chosenDate) {
            Spry.Utils.addClassName('id'+doIt('{dsArtists::@id}'),'hidden');
        }
    }
    </script>
    </body>
    </html>

     

    You will need to decide on how to get a value for the chosenDate. This will depend on how you want the user to select a date.

     

    To see it working, change the chosenDate value.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 3:16 AM   in reply to TechDan

    I am in Europe at the moment, a long way from Down Under.

     

    Have a look at this site http://europeanwomeninbusiness.com.au where I used DMXzone Calendar 2 http://www.dmxzone.com/go/19516/dmxzone-calendar-2/. This makes it very easy to do what you want.

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points