Skip navigation
CJLong
CJLong Calculating status...
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?

915 Views   9 Replies   Latest reply: Ben Pleysier, Apr 17, 2012 6:49 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Apr 6, 2012 2:47 PM   in reply to CJLong
    Report

    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:
  • Ben Pleysier
    Currently Being Moderated
    2. Ben Pleysier,
    Apr 10, 2012 7:41 PM   in reply to Ben Pleysier
    Report

    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:
  • CJLong
    Currently Being Moderated
    3. CJLong,
    Apr 11, 2012 10:09 AM   in reply to Ben Pleysier
    Report

    This is brilliant!  Thank you so much!  http://www.bspgc.com/customgramps2.html I've gotten your code into my page without  breaking it, and changed the model imputs to buttons.  I think I'm close on getting the color thumbnails in place but I'm missing something... either in the var or xPath...or both.

     

    <span class="pbs">Color:</span> <span spry:repeat="color" spry:setrow="color">

      <label spry:if="'{color::Color}'=='{Color}'"><input type="image" name="rgColor" src="{color::imgURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}')" selected></label>

      <label spry:if="'{color::Color}'!='{Color}'"><input type="image" name="rgColor" src="{color::imgURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}')"></label>

      </span>

     

    Thanks again!

    Shelly

     
    |
    Mark as:
  • CJLong
    Currently Being Moderated
    4. CJLong,
    Apr 16, 2012 7:30 AM   in reply to CJLong
    Report

    I'm getting closer!

     

    The following snippets allow me to pull in images from my database to use as buttons to select colors.  However each button shows the same image and they all change when the next selection is made.

     

    http://www.bspgc.com/customgramps2.html

     

    How do I get it to match the appropriate image to the correct button?

     

     

     

     

    <span class="pbs">Color:</span> <span spry:repeat="color" spry:setrow="color">
                             
                             

      <label spry:if="'{color::Color}'=='{Color}'"><input type="image" name="rgColor" src="{image::imageURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}', '{Wheel}')" ></label>
      <label spry:if="'{color::Color}'!='{Color}'"><input type="image" name="rgColor" src="{image::imageURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}', '{Wheel}')"></label>
      </span>

     

    <script>

    var image = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2[Model='Precedent' and Color='White' and Seat='White' and Canopy='White' and Wheel='Standard']"); // setting the default values

    var model = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Model", {distinctOnLoad: true});

    var color = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Color", {distinctOnLoad: true});

    var seat = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Seat", {distinctOnLoad: true});

    var canopy = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Canopy", {distinctOnLoad: true});

    var wheel = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Wheel", {distinctOnLoad: true});

     

    // FILTERING DATA USING XPATH

    function newXPath(model, color, seat, canopy, wheel){

        image.setXPath("dataroot/Table2[Model='"+model+"' and Color='"+color+"' and Seat='"+seat+"' and Canopy='"+canopy+"' and Wheel='"+wheel+"']");

        image.loadData();

    }

    </script>

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    5. Ben Pleysier,
    Apr 16, 2012 8:01 AM   in reply to CJLong
    Report

    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:
  • CJLong
    Currently Being Moderated
    6. CJLong,
    Apr 16, 2012 12:29 PM   in reply to Ben Pleysier
    Report

    Gotcha!  I knew I was missing something basic.  I was using the Color field for the alt text so it didn't occur to me that I needed to change the constructor.  Is there a way to call in both Color and imgURLthumb so that I can use them both?

     

    Other than the alt text I have only two more issues.

     

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

     

    var stdColors = new Array ("White", "Beige", "Green", "Blue");// condensed array

     

    var sorted = stdColors.sort();

    document.write("Returned string is : " + sorted );

     

    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?

     

    Thanks again!!!

    Shelly

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    7. Ben Pleysier,
    Apr 16, 2012 5:24 PM   in reply to CJLong
    Report

    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:
  • CJLong
    Currently Being Moderated
    8. CJLong,
    Apr 17, 2012 6:10 AM   in reply to Ben Pleysier
    Report

    Thanks again Gramps!  You are amazing!

     

    Shel

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    9. Ben Pleysier,
    Apr 17, 2012 6:49 AM   in reply to CJLong
    Report

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

     

    Gramps

     
    |
    Mark as:
Actions

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