10 Replies Latest reply: Oct 6, 2010 6:45 PM by Ben Pleysier RSS

    Linking to a Spry Data Set Entry

    zevendesign Community Member

      Hi, this may be an obvious question, but I am new to Spry and JavaScript and haven't found the answer elsewhere, so here it:

      I have a Spry data set that is listing services available. The listing is on the left and as you push each one, a detail column has information about that service. This works great. Now to the part I can't figure out--on the home page there are three "ad boxes" that promote specific services. I need these to link to the specific services on the services page, in the Spry data set. I can link to the spry data set, but I don't know how to have the spry data set default to a specific a entry. If you answer, could you please provide the code... Thanks!

        • 1. Re: Linking to a Spry Data Set Entry
          Ben Pleysier CommunityMVP

          It is very difficult to grasp what it is that you want. The best way is for you to supply an online URL so that we can see for ourselves.

          • 2. Re: Linking to a Spry Data Set Entry
            zevendesign Community Member

            Right, here is a URL to the test page. You will see a listing of massages. As you push the buttons, the information is shown on the right. There are three buttons along the top which highlight massage types. I would like for these, when pushed, to pull up the detail information for that massage type (in the lower section of the site). Let me know if that makes sense.

             

            http://www.viidesign.comoj.com/test.html

             

            Thanks.

            • 3. Re: Linking to a Spry Data Set Entry
              Ben Pleysier CommunityMVP

              First off, welcome to our world. Spry is a very easy framework to learn.

               

              The information for your dataset comes from a table in massage_list.html. Because you do not use this table for display purposes, it is best to keep it down to basics, ie. no formatting and other HTML code to be included.

               

              My proposal for massage_list.html

              • Leave the BUTTON column as is (maybe rename to MESSAGE TYPE or similar)
              • Use the HEADER column for your image source eg. images/pregnancy-massage-ad.png (rename column to reflect content)
              • There is no need for MAIN_IMAGE, this only uses more resources
              • Leave DESCRIPTION as is

               

              Once you have done that, change your master/detail area to the following

              <div class="MasterDetail">
                <div spry:region="dsMassages2" class="MasterContainer" id="main_navbar">
                <div class="MasterColumn" spry:repeat="dsMassages2" spry:setrow="dsMassages2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{BUTTON}</div>
                </div>
                <div spry:detailregion="dsMassages2" class="DetailContainer" id="subject_box">
                  <div class="DetailColumn"><h2>{BUTTON}</h2</div>
                  <div class="DetailColumn"><img src="{HEADER}" width="587" height="391" alt="{BUTTON}" /></div>
                  <div class="DetailColumn">{DESCRIPTION}</div>
                </div>
                <br style="clear:both" />
              </div>

              The above is very similar to what you aleady have. The changes have been highlighted. Note I have used HEADER, but this would be better represented with a change of title as proposed earlier.

               

              For the region above the master/detail use the following markup

              <div id="content_box">
                <div spry:region="dsMassages2" id="ad_box">
                <div spry:repeat="dsMassages2">
                  <span spry:if="'{BUTTON}'=='SWEDISH MASSAGE'" spry:setrow="dsMassages2" spry:hover="MainImageHover" spry:select="MasterColumnSelected"><img src="{HEADER}" width="317" height="237" alt="{BUTTON}" /></span>
                  <span spry:if="'{BUTTON}'=='NATURAL LIFT FACE MASSAGE'" spry:setrow="dsMassages2" spry:hover="MainImageHover" spry:select="MasterColumnSelected"><img src="{HEADER}" width="317" height="237" alt="{BUTTON}" /></span>
                  <span spry:if="'{BUTTON}'=='PREGNANCY MASSAGE'" spry:setrow="dsMassages2" spry:hover="MainImageHover" spry:select="MasterColumnSelected"><img src="{HEADER}" width="317" height="237" alt="{BUTTON}" /></span>
                </div>
              </div>

              I have merely presented the markup, thus styling has not been included in any of this. Styling is best done using CSS, so in this case you will put your image hover effect in the MainImageHover class.

               

              I hope this helps.

              • 4. Re: Linking to a Spry Data Set Entry
                zevendesign Community Member

                Hi and thanks for your answer. I looked at all this and it seems this is setting up a second spry region, referencing the same database. This, I guess, would be one solution although I am not entirely sure how I would retain the hover effect I have it on right now. However, I think (hope) there is something more simple. A better example might be the "CONTACT" in the top left of the banner. I want this to link to the contact form in the spry data set. Is there a way to tell a link to go to a data set with a certain row of info displayed?

                Thanks.

                • 5. Re: Linking to a Spry Data Set Entry
                  zevendesign Community Member

                  What I am hoping for is a simple <a onclick=go to spry:region "dsMassages2" and show panel "CONTACT US">CONTACT<3> but with proper coding...

                  • 6. Re: Linking to a Spry Data Set Entry
                    Ben Pleysier CommunityMVP
                    I looked at all this and it seems this is setting up a second spry region, referencing the same database.

                    Correct

                    This, I guess, would be one solution although I am not entirely sure how I would retain the hover effect I have it on right now.

                    In my previous post I explained how to do that

                    However, I think (hope) there is something more simple.

                    Good luck with that

                    A better example might be the "CONTACT" in the top left of the banner. I want this to link to the contact form in the spry data set.

                    Personally I would go about this in exactly the same manner as with the boxes but without the images

                    Is there a way to tell a link to go to a data set with a certain row of info displayed?

                    Yes, have a look here http://labs.adobe.com/technologies/spry/samples/data_region/DataWithURLParams.html

                    • 7. Re: Linking to a Spry Data Set Entry
                      zevendesign Community Member

                      Thanks and apologies if I am being daft.

                       

                      The link you sent me to seems to be exactly what I am looking for except that I can't seem to implement it.

                      I've updated my test site, the link is here:

                       

                      http://www.viidesign.comoj.com/test.html

                       

                      I've coded the "CONTACT" button and the Pregnancy Ad button, however both don't work. Could you take a look at the code and see what I am doing wrong? It seems to me that I am following the documentation...

                       

                      I also seemed to have introduced a new problem--when the page loads, the INTRODUCTION text isn't showing up. It defaults to having nothing selected, which is not very user friendly.

                       

                      Thanks.

                      • 8. Re: Linking to a Spry Data Set Entry
                        Ben Pleysier CommunityMVP

                        When I type http://www.viidesign.comoj.com/test.html?row=6 into the address bar I get the contact form.

                         

                        The link should therefore read

                        <li><a href="<li><a href="test.html?row=6">CONTACT</a></li>

                        To go to the Pregnancy Message the link should be "test.html?row=3"

                         

                        To default to the INTRODUCTION add the following

                        dsMassages2.addObserver({ onPostLoad: function(ds, type) {      dsMassages2.setCurrentRow(params.row ? params.row : 0); }});

                        The additional markup says that if there is no params then set the current row to 0.

                         

                        In all of this, you will notice that there is a page refresh every time that the link is followed, which doesn't matter if you are OK with this. In my original solution, there is no page refresh, only the content changes.

                        • 9. Re: Linking to a Spry Data Set Entry
                          zevendesign Community Member

                          Thanks a lot! That did it (and I feel stupid now that I didn't notice it myself).

                          Reloading the page isn't really a problem, although I did try to do it how you said in your first post and ran into a few problems. I'll lay them out here as you probably know the solution for them and it would be good for me to know it in the future:

                          a) The ad images aren't the same as the main image and thus trying to load them from the html source file (massage_list.html) wasn't working.

                          b) The ad images have a roll-over effect that I am not sure how to do with CSS styling. I know how to set the background with CSS, but each ad image is different, which is where I run into a problem.

                          c) The third ad box links to a different page in the site.

                          d) Lastly, when I changed the HTML to match your post, it broke the structure of the site (although as I'm writing this, I think the problem is that I didn't rewrite the CSS accordingly).

                          All in all, the last solution you provided did what I originally wanted--so THANKS AGAIN!

                          This is the first site I've put together so I'm still on the learning curve, but you're help has been awesome.

                          • 10. Re: Linking to a Spry Data Set Entry
                            Ben Pleysier CommunityMVP

                            Thank you for your feedback, this is as important to us as is the solution to a problem for you.

                            a) The ad images aren't the same as the main image and thus trying to load them from the html source file (massage_list.html) wasn't working.

                            In the HTML-table you can add an extra column with the source of the ad image

                            b) The ad images have a roll-over effect that I am not sure how to do with CSS styling. I know how to set the background with CSS, but each ad image is different, which is where I run into a problem.

                            By assigning a different ID to each image, you can target the roll-over image

                            c) The third ad box links to a different page in the site.

                            Using spry:if statements you can filter any exceptions

                            d) Lastly, when I changed the HTML to match your post, it broke the structure of the site (although as I'm writing this, I think the problem is that I didn't rewrite the CSS accordingly).

                            You are probably spot-on with your realisation. When you hit the obstacle again just come back here for assistance.

                            All in all, the last solution you provided did what I originally wanted--so THANKS AGAIN!

                            This is the most enjoyable part of your post.