Skip navigation
CJLong
Currently Being Moderated

Master/Detail Filter with Buttons

Apr 6, 2012 7:19 AM

Tags: #spry #dreamweaver_cs5

I've got an Item Customizer at www.bspgc.com/customize.html.  It works well but we need to add a few more options. I've built a database www.bspgc.com/database/Table1.xml  I thought a Spry Master/Detail region would work well www.bspgc.com/custom.html but I want to make it filter using similar buttons. Is this possible?

 
Replies
  • Currently Being Moderated
    Apr 6, 2012 2:47 PM   in reply to CJLong

    The difference between what you have now and using JS (Spry) is that with the latter there is not a complete page refresh. You can use an onclick event to change the image using the CSS content property. Google the term or have a look here http://www.w3schools.com/cssref/pr_gen_content.asp

     

    You can use the Spry (or jQuery) element selector utility (http://labs.adobe.com/technologies/spry/articles/element_selector/sele ctor_examples.html) to change the class, hence change the image.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 7:41 PM   in reply to Ben Pleysier

    Please have a look at the following

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div spry:detailregion="image model color seat canopy">
        <p>Model</p>
      <span spry:repeat="model" spry:setrow="model">
      <label spry:if="'{model::Model}'=='{image::Model}'"><input type="radio" name="rgModel" value="{model::Model}" id="rgModel" onChange="newXPath('{model::Model}', '{image::Color}', '{image::Seat}', '{image::Canopy}')" checked>{model::Model}</label>
      <label spry:if="'{model::Model}'!='{image::Model}'"><input type="radio" name="rgModel" value="{model::Model}" id="rgModel" onChange="newXPath('{model::Model}', '{image::Color}', '{image::Seat}', '{image::Canopy}')">{model::Model}</label>
      </span>
        <p>Color</p>
      <span spry:repeat="color" spry:setrow="color">
      <label spry:if="'{color::Color}'=='{image::Color}'"><input type="radio" name="rgColor" value="{color::Color}" id="rgColor" onChange="newXPath('{image::Model}', '{color::Color}', '{image::Seat}', '{image::Canopy}')" checked>{color::Color}</label>
      <label spry:if="'{color::Color}'!='{image::Color}'"><input type="radio" name="rgColor" value="{color::Color}" id="rgColor" onChange="newXPath('{image::Model}', '{color::Color}', '{image::Seat}', '{image::Canopy}')">{color::Color}</label>
      </span>
        <p>Seat</p>
      <span spry:repeat="seat" spry:setrow="seat">
      <label spry:if="'{seat::Seat}'=='{image::Seat}'"><input type="radio" name="rgSeat" value="{seat::Seat}" id="rgSeat" onChange="newXPath('{image::Model}', '{image::Color}', '{seat::Seat}', '{image::Canopy}')" checked>{seat::Seat}</label>
      <label spry:if="'{seat::Seat}'!='{image::Seat}'"><input type="radio" name="rgSeat" value="{color::Seat}" id="rgSeat" onChange="newXPath('{image::Model}', '{image::Color}', '{seat::Seat}', '{image::Canopy}')">{seat::Seat}</label>
      </span>
        <p>Canopy</p>
      <span spry:repeat="canopy" spry:setrow="canopy">
      <label spry:if="'{canopy::Canopy}'=='{image::Canopy}'"><input type="radio" name="rgCanopy" value="{canopy::Canopy}" id="rgCanopy" onChange="newXPath('{image::Model}', '{image::Color}', '{image::Seat}', '{canopy::Canopy}')" checked>{canopy::Canopy}</label>
      <label spry:if="'{canopy::Canopy}'!='{image::Canopy}'"><input type="radio" name="rgCanopy" value="{canopy::Canopy}" id="rgCanopy" onChange="newXPath('{image::Model}', '{image::Color}', '{image::Seat}', '{canopy::Canopy}')">{canopy::Canopy}</label>
      </span>
      <div>
        <img src="http://www.bspgc.com/{imgURL}" alt="{imgURL}">
      </div>
    </div>
    <!-- I prefer to have the JS at the bottom of the document -->
    <script src="SpryAssets/SpryData.js"></script>
    <script src="SpryAssets/xpath.js"></script>
    <script>
    var image = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1[Model='Precedent' and Color='White' and Seat='White' and Canopy='White']"); // setting the default values
    var model = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Model", {distinctOnLoad: true});
    var color = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Color", {distinctOnLoad: true});
    var seat = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Seat", {distinctOnLoad: true});
    var canopy = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Canopy", {distinctOnLoad: true});
    // FILTERING DATA USING XPATH
    function newXPath(model, color, seat, canopy){
        image.setXPath("dataroot/Table1[Model='"+model+"' and Color='"+color+"' and Seat='"+seat+"' and Canopy='"+canopy+"']");
        image.loadData();
    }
    </script>
    </body>
    </html>

     

    The above is only to illustrate the technique. It will need styling (including adding the colours rather than just text). It may also be advisable to break the image down to a basic model stripped of the varying parts so that only a small image is added for the colour variations.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 8:01 AM   in reply to CJLong

    Taking the body colour as an example

    1. change the constructor to var color = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/imgURL", {distinctOnLoad: true});
    2. change the input type radio to input type image
    3. change Color to imgURL
    4. change onChange to onClick
    5. change checked to disabled
    6. add src="{color::imgURL}" as the source of the button image

     

    Repeat the above for each of the other radio buttons replacing imgURL with imgURLcanopy etc

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 5:24 PM   in reply to CJLong

    1.  Can I use arrays to separate the different types of Colors into groups? ( ie. Standard, Premium, Metalllic, Marble, Camo)

    Use an if:function per group as in http://blogs.adobe.com/spryteam/2008/02/spry_161_released_to_labs.html

    2.  Not all options are available together.  For example Camoflaged Seats are only available  for Camoflaged Bodys, White Seats and Canopys are not available on Camoflaged cars.  Also DS models have far fewer color options.  When you choose a combination that is not available the selector stops working. Is there a function that would hide options if they are not available?

    Apply an xPath filter to the options in a similar manner as we have done for image.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 6:49 AM   in reply to CJLong

    Gosh, you noticed that I was showing off  .  Thank you for your feedback.

     

    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