Adobe Community: Spry filter help

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"?>

<name>Smooth Criminals</name>

<type>Wedding and Corporate</type>

</artist>

<name>The Supersets</name>

<type>Wedding and Corporate</type>

</artist>

<name>The Groove Monsters</name>

<type>Wedding and Corporate</type>

</artist>

<name>Straziante</name>

<type>Wedding and Corporate</type>

</artist>

<name>The Beat Factor</name>

<type>Wedding and Corporate</type>

</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

2286 Views 17 Replies Latest reply: TechDan, Aug 23, 2012 5:08 AM

Replies

Currently Being Moderated

1. Ben Pleysier,

Jul 11, 2012 6:00 PM in reply to TechDan

Report

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

2. TechDan,

Jul 13, 2012 3:24 PM in reply to Ben Pleysier

Report

Ok thanks for the reply. I'm going to try that now but how would I specify which dates in the xml file? I presume that when the user picks a date it will look through the xml file to see if that date is there, so does that mean I have to enter a load of dates of which the artist is available?

thanks

|
Mark as:
Currently Being Moderated

3. Ben Pleysier,

Jul 13, 2012 4:26 PM in reply to TechDan

Report

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

Gramps

|
Mark as:

Currently Being Moderated

4. TechDan,

Jul 14, 2012 3:01 PM in reply to Ben Pleysier

Report

Ok so here is the second xml file:

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

<name>Smooth Criminals</name>

</artist>

<name>The Supersets</name>

</artist>

<name>The Groove Monsters</name>

</artist>

<name>Straziante</name>

</artist>

<name>The Beat Factor</name>

</artist>

</artistsdates>

But now i'm stuck. Here's my 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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/en-stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="SpryAssets/SprySpotlightColumn.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var dsartists = new Spry.Data.XMLDataSet("artistsearch.xml", "artists/artist");
dsartists.setColumnType("picture", "html");
dsartists.setColumnType("button", "html");
</script>
</head>
<body>
<div id="container">
 
<div id="allactsmain">
  <div spry:region="dsartists" class="SpotlightAndStacked">
    <div spry:repeat="dsartists" 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>
</div>
</div> 
 
  
</body>
</html>

So would it be somethiing like:

var dsdates = new Spry.Data.XMLDataSet("datesearch.xml", "artistdates/artist/[datesbooked = '2012-01-01,2013-01-01']");

And where would I intergrate the other xml file into this?

Sorry i'm not that good with javascript or xpath so bear with me!

Mark as:

Currently Being Moderated

5. Ben Pleysier,

Jul 14, 2012 6:43 PM in reply to TechDan

Report

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

6. TechDan,

Jul 17, 2012 2:51 PM in reply to Ben Pleysier

Report

I've got this far but don't know where to go next in terms of the 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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/en-stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryNestedXMLDataSet.js"></script>
<link href="SpryAssets/SprySpotlightColumn.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var dsartists = new Spry.Data.XMLDataSet("artistsearch.xml", "artists/artist");
dsartists.setColumnType("picture", "html");
dsartists.setColumnType("button", "html");
var dsdates = new Spry.Data.NestedXMLDataSet("datesearch.xml", "artistsdates/artist");
</script>
</head>
<body>
<div id="container">
 
 
<div id="logo"><a href="index.html"><img src="images/logotr.png" width="300" height="154" /></a></div>
  
<div id="navigation">
          <ul class="menu">
            <li class="home"><a href="index.html">Home</a></li>
            <li class="wedent"><a href="wedding-entertainment.html">Wedding Entertainment</a></li><li class="corpent"><a href="tribute-acts.html">Corporate Entertainment</a></li>
            <li class="faq"><a href="faq.html">FAQ</a></li>
            <li class="contact"><a  href="contact.html">Contact Us</a></li>
            <li class="about"><a  href="about.html">About Us</a></li>
            <li class="actsu"><a  href="act-signup.html">About Us</a></li>
 
 
    </ul>
</div>
<div id="allactsheadr"><img src="images/allactshdr.jpg" width="156" height="82" class="header" /></div>
<div id="allactsmain">
  <div spry:region="dsartists" class="SpotlightAndStacked">
    <div spry:repeat="dsartists" 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>
 
 
</div>
</div>
 
 
 
 
</body>
</html>

Thanks

Mark as:

Currently Being Moderated

7. Ben Pleysier,

Jul 17, 2012 7:01 PM in reply to TechDan

Report

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

8. TechDan,

Jul 18, 2012 3:21 PM in reply to Ben Pleysier

Report

Ok that worked, the dates are showing up underneath.

So now do I need to use XPath to filter, not sure how to make it filter out the dates booked though

var dsdates = new Spry.Data.NestedXMLDataSet(dsartists, "datesbooked/datebooked" [something here] );

Thanks

|
Mark as:

Currently Being Moderated

9. Ben Pleysier,

Jul 19, 2012 6:26 AM in reply to TechDan

Report

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

10. TechDan,

Aug 2, 2012 5:19 PM in reply to Ben Pleysier

Report

Hi, sorry for not replying sooner. I've been moving house the past two weeks so its been a bit hectic and we lost broadband for a while but its all up now.

Thanks very much for taking so long to looking into this, much appreciated.

Ok that all works and I've now got a datepicker:

<p><label for="dp-1">Demo 1</label> : <input type="text" class="w16em" id="dp-1" name="dp-1" value="13/03/2009" /></p>
      <script type="text/javascript">
      // <![CDATA[
        var opts = {
                // Attach input with an id of "dp-1" and give it a "d-sl-m-sl-Y" date format (e.g. 13/03/1990)
                formElements:{"dp-1":"d-sl-m-sl-Y"}
        };
        datePickerController.createDatePicker(opts);
      // ]]>
      </script>

How can I connect the two? I want a datepicker on a different page to where the results will be (home page). And one on the same page.

Thanks

|
Mark as:
Currently Being Moderated

11. TechDan,

Aug 6, 2012 3:50 PM in reply to TechDan

Report

Ok i'm really stuck now.

I've been looking at how to do this for a few days but i'm just not good with javascript

Any help?

Thanks

|
Mark as:
Currently Being Moderated

12. TechDan,

Aug 12, 2012 4:51 PM in reply to TechDan

Report

I think I need to assign the 'id' dp-1 to the chosendate function.

Cant work out how though...

|
Mark as:
Currently Being Moderated

13. TechDan,

Aug 15, 2012 1:34 PM in reply to Ben Pleysier

Report

Gramps where are you!

|
Mark as:
Currently Being Moderated

14. Ben Pleysier,

Aug 16, 2012 3:16 AM in reply to TechDan

Report

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:
Currently Being Moderated

15. TechDan,

Aug 16, 2012 3:29 AM in reply to Ben Pleysier

Report

Ok thanks but before I purchase that I've got this from somewhere else:

var opts = { // Attach input with an id of "dp-1" and give it a "d-sl-m-sl-Y" date format (e.g. 13/03/1990) formElements:{"dp-1":"d-sl-m-sl-Y"}, // Stipulate some callback functions callbackFunctions: { "dateset": [yourFunction] // for change to both input and datepicker // or "datereturned" for just the input } }; datePickerController.createDatePicker(opts); function yourFunction() { chosenDate = document.getElementById("dp-1").value; }

Is there anyway to make this work or is it a lost cause?

I'm from England by the way, have a good time in Europe!

Dan

|
Mark as:
Currently Being Moderated

16. TechDan,

Aug 22, 2012 10:49 AM in reply to Ben Pleysier

Report

Ok I bought the calendar but I still don't understand how you would connect it to the function?

|
Mark as:
Currently Being Moderated

17. TechDan,

Aug 23, 2012 5:08 AM in reply to Ben Pleysier

Report

Ok I've come up with this:
<script>
var chosenDate = (document.getElementById("dmxCalendar21").value !="" )? document.getElementById("dmxCalendar21").value : '2012-08-14' ;

function checkDate(rgn, doIt) {
    if (doIt('{dsDates::datebooked}') == chosenDate) {
        Spry.Utils.addClassName('id'+doIt('{dsArtists::@id}'),'hidden');
    }
}
</script>

But it does'nt change when the date is picked so i'm a bit lost now...

|
Mark as:

Forum guidelines

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

Spry Framework for Ajax (READ ONLY)

Spry filter help

Jul 11, 2012 1:58 PM

More Like This

Bookmarked By (0)

Answers + Points = Status