Spry Tabbed Panel and Master/Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each page, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page.
Thanks.
Tony

Hi Tony,
Have a look here http://labs.adobe.com/technologies/spry/samples/data_region/PagingSample.html and here http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
If you need further assistance, go to the Spry Forum http://forums.adobe.com/community/labs/spry
I hope this helps.
Ben

Similar Messages

Spry Tabbed Panels and Master/ Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
Thanks.
Tony

Hi Tony,
Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
    <p> </p>
   <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">All feedback</li>
        <li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
        <li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
        <li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
            <tr>
              <td width="80"><strong>Feedback Number</strong></td>
              <td><strong>Days attended</strong></td>
              <td><strong>Arrived by</strong></td>
              <td><strong>Arrival arrangements</strong></td>
              <td><strong>Expectations met</strong></td>
              <td><strong>Ticket price</strong></td>
              <td><strong>Zip code</strong></td>
            </tr>
.................... rest of table probably your PHP repeat area
              </tr>
          </table> .... end feedback table tag
          <div spry:region="dsAllFeedback">
            <table>
               <tr>
                <th spry:sort="Feedback_Number">Feedback Number</th>
                <th spry:sort="Days_attended">Days attended</th>
                <th spry:sort="Arrived_by">Arrived by</th>
                <th spry:sort="Arrival_arrangements">Arrival arrangements</th>
                <th spry:sort="Expectations_met">Expectations met</th>
                <th spry:sort="Ticket_price">Ticket price</th>
                <th spry:sort="Zip_code">Zip code</th>
              </tr>
              <tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
                <td>{Feedback_Number}</td>
                <td>{Days_attended}</td>
                <td>{Arrived_by}</td>
                <td>{Arrival_arrangements}</td>
                <td>{Expectations_met}</td>
                <td>{Ticket_price}</td>
                <td>{Zip_code}</td>
              </tr>
            </table>
          </div>
          <br />
          <table border="0">
I hope this helps.
Ben

Master / details pages set in a .htaccess protected directory

Hi
I am using Dreamweaver CS4 functionality to create a Master/Details page set. I have done this many times before without a problem, however, i am now trying to create the master / detail page set in the members area of a web site. The directory that contains both the master and the details page is .htaccess protected which means that the master page works fine but the details do not get passed to the details page. The details page remains blank where the echo statements should be. If i copy the exact same master and detail pages and then paste them in to an unprotected directory the pages work fine and the details are passed from the master to the details page without a problem.
I have been unable to find any information on this so any help would be gratefully received.

I'm not using secure access (https). I started with the most basic configuration, standard http: on port 80, etc. The configuration works perfectly fine when tested on my home PC. The problem seems to be in Safari on the iphone it prompts me for a login, and accepts it.. then it fires up the media/movie player and I'm guessing it's not passing the authentication/credentials/whatever to the movie player. When the media tries to play, it notes it's an access controlled file and just quits out. The movie player doesnt seem to allow asking of login/password info. Thoughts??

Spry tabbed panels and "The tag: "li" doesn't have an attribute: "tabindex" ..."

Hi,
I've been using the DW CS4 "Spry Tabbed Panels" on a few pages. When I validate the website (with DW tool for that), I get the following messages for each use of the tabbed panels: The tag: "li" doesn't have an attribute: "tabindex" in currently active versions. [XHTML 1.0 Transitional].
Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
Emilie
Example of code this message is linked to:
<div class="TabbedPanels" id="TabbedPanelsADMS">
<ul id="TabUL" class="TabbedPanelsTabGroup">
    <li id="TabLI1" class="TabbedPanelsTab" tabindex="0">About</li>
    <li id="TabLI2" class="TabbedPanelsTab" tabindex="0">Assets</li>
    <li id="TabLI3" class="TabbedPanelsTab" tabindex="0">Input</li>
    <li id="TabLI4" class="TabbedPanelsTab" tabindex="0">Output</li>
    <li id="TabLI5" class="TabbedPanelsTab" tabindex="0">Support</li>
    <li id="TabLI6" class="TabbedPanelsTab" tabindex="0">Purchase</li>
</ul>
<div class="TabbedPanelsContentGroup">
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
</div>

</div>

Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
If validation is important to you, you need to remove tabindex. Should you worry about it? Not really. Sometimes it makes sense to ignore validation to achieve a particular goal, which is why Spry widgets use tabindex in a technically invalid way.
The explanation as to why Spry does that can be found here: http://blogs.adobe.com/spryteam/2007/03/spry_widgets_and_tab_index.html.

Spry Tabbed Panel Defaults to home page with recordset paging

I have Spry ver. 1.6.1. A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6) accesses a mysql database and shows the records in a table format. Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page. I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5; It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed. The user then has to click on Tab 6 to view the new results. The url where this can be viewed is at http://Training.reliantair.com. Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
I want to avoid putting another button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?

I didn't try the cookie method suggested. The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
In the Head of the HTML document I put this code. It searches for the query string in the HREF when any of the record paging buttons is pressed.
<script type="text/javascript" src="SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
if (location.href.indexOf("GetChkRideRecs") != -1 && location.href.indexOf("tab") == -1)
location.href +="&tab=5#TabbedPanels1";
</script>
Then in the body of the HTML document at the bottom of the page the tabbed panel widget is changed like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
The first time a recordset paging link is clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF. Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found.

Contact form with Spry 'Tabbed Panels' and 'Validation TextField'

Hello
I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
5. If it doesn't do either of these, how could we make it do that?
I hope to hear from you!

Hello
I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
5. If it doesn't do either of these, how could we make it do that?
I hope to hear from you!

Search Panel in Master-Detail Page

Hi experts,
I've stuck to a wierd problem, where i've implemented a master-detail relationship in a page. This works fine.
I've also created a search page seperately for this. But now, i'm confused on how to add an item into the searchPanel which would be mapped with a detail attribute.
For E.g:
===============================================================
SearchPage: (1st Page)
Item1 __________________
Item2 __________________
Item3 __________________
GO CLEAR
ResultsTable:
Item1 || Item2 || Item3
==============================================================
CreatePage: (2nd Page)
Master Details.... CANCEL APPLY
Item1 ____________________
Item2 ____________________
Item3 ____________________
Details .....
Item4 || Item5 || Item6
CANCEL APPLY
===================================================================
**Now i wanna add "Item4" into the search panel of the SearchPage. I hope its clear to you, in case not, just poke me once.
Regards
Ari

Oh !! Gosh Keerthi,
I know that, how to add attributes into the searchPanel. U're not getting the pulse of the problem. Lemme explain it once again...
I've got two VOs .. Lets say !! MasterTableVO and DetailTableVO.
Now in the "SearchPage", i've referenced only the MasterTableVO from advancedTable and got simpleSearchPanel on advancedTable where i've 3 items ITEM1,ITEM2,ITEM3 (these 3 r MasterTableVO attributes.)
**As this is a master-detail page .. so for each master table record, there r multiple detail records entered in the 2nd Page.
Now supposedly, i wanna search only those master detail records in the SearchPage which contains a certain "XYZ" value for the ITEM4(this is in DetailTableVO) in the detail records.
So, To your inquiry .. No, Item4 doesn't exists in the VO referenced in the advancedTable of the SearchPage.
Regards
Ari :)

Master Detail Page Set link - to a Lightbox feature?

I'm hoping someone can point me in the right direction here. I have set-up a master & detail page from a recordset and it is working as it should, however my client would like to have the details show up in a lightbox instead of going to another page. How can I accomplish this? I have a lightbox that I am using called pretty photo... which is also working, I just am looking for a way to have them work together.
Thanks,
Bret

Thank you! that is getting me there I think I did change a couple things.... although I am still not sure how to tie the two links together.
<a href="#inline-1" rel="prettyPhoto[inline]">Click to view details </a>
     <div id="inline-1" style="display:none;">
          <p>This is inline content opened in prettyPhoto.</p>
          <p>ECHO HERE</p>
     </div>
This is the current link that redirects to a new page showing all info from recordset:
<a href="staffDetail.php?recordID=<?php echo $row_rsStaffMaster['staffID']; ?>"> <?php echo $row_rsStaffMaster['lastName']; ?></a>
What I need is the current link to display into the lightbox. How do I seperate the echo and still keep the staffID part?
Thanks
UPDATE:
Ok so I have updated the link this way...
    <a href="#inline-1 staffDetail.php?recordID=<?php echo $row_rsStaffMaster['staffID']; ?> "rel="prettyPhoto[inline]"><?php echo $row_rsStaffMaster['lastName'];?></a>
        <div id="inline-1" style="display:none;">
            <p>This is inline content opened in prettyPhoto.</p>
            <p>ECHO HERE</p>
        </div>
And this now open the lightbox... but all it does is give me a tiny lightbox of content | null
Would I add my - staffdetailspage code & recordset to the ?
<p>ECHO HERE</p>
(the page that the link goes to now)

Spry Tabbed Panels and Pop Up Link from Image Hotspot

I've created an image map with Hotspot links to either send to another web page or to open a previously created Pop Up window with information.
I've imported my image, image map and Hotspots into a tab
The issue I'm having is when clicking on the hotspot (within the Spry tabbed panel), to open the pop up page; it doesn't work
If I select a Hotspot which sends users to another web page, that works ok.
Would appreciate it if someone else who has run into this and what your recommendation is for a fix.
thanks, R Silva

Hi,
Unable to post to a public server; however I've attached the files so the code can be reviewed.
thanks

Refresh problem by combination of programmatic view and master-detail page

I am using the latest versions of both ADF (10.1.3.2.0.4066) and JHeadstart (10.1.3.1.26) and I have an application with 1 page in which I have as root page a programmatic view (table-form) which I fill with request parameters.
Under that programmatic view I have a master (table) with 3 detail pages (table).
The programmatic view is populated with always 1 row, which goes always correct.
The problem is occuring when iterating through the first entity based master table which contains lots of rows. Then the problem is that when you navigate through the master table the detail pages are refreshed correctly, but when you navigate back to the first row that row won't get updated.
The next thing I tried is create a new jheadstart application with only the master-detail pages (entity based), so without the programmatic view, and then the iterating through the master table and the refresh of the child tables is working correct.
What can be the problem here.

Have you tested this in the ADF Business Components Browser? That's the tester that you can find by right-clicking your ADF BC Application Module and choosing Test. If you go to the View Object instance for the programmatic view, and using the ViewLinks to its children, do you get the same behavior as in the JHeadstart application?
kind regards,
Sandra Muller
JHeadstart Team
Oracle Consulting

Problem with Spry Tabbed Panels and Mac Safari

On a site I'm working on I have implemented Spry Tabbed
Panels. Everything was great until my boss looked at it on his Mac
Safari. Spry doesn't seem to honor the 100% width, and cuts it off.
I have looked at the CSS and don't see what is holding it up.
Here is
a link to a screenshot.
The CSS that defines the width is attached.
Can anyone help? Thanks!

Wow, so I am the only one that has ever used Spry that
doesn't work in Safari? I find that hard to believe.
So let me twist this another way. Does anyone know why a div
does not stretch 100% of it's parent in Safari?

Spry Tabbed Panels and Sliding Door CSS

Has anyone been able to customize Spry Tabbed Panels using
the Sliding Door CSS technique?
Spry Tabbed Panels...
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
Sliding Door CSS technique...
http://alistapart.com/articles/slidingdoors/
It would really be sweet to also have the animation of the
PVII Tab Panel Magic...
http://www.projectseven.com/products/tools/tabpanel/demo/

Hi,
Really nice :) I tried it and works perfectly.
Thank you,
Diana

Spry Tabs Panel and Paypal

Is there a way to integrate paypal with Dreamweaver Spry Tab Panels? I have a site and have used the add to cart code outside of the spry tabs and it works fine as in adds my product to the paypal shopping cart. When I put the same code into the spry tables, it simply sends me to the paypal homepage and not to the shopping cart. I need help!! Any advice would be truly appreciated.
http://www.takingteainstyle.com/black.html
Thank you

Most likely caused by malformed code. Use the W3C validation tool to check your HTML code for errors.
http://validator.w3.org/
You have unclosed <tr> tags in your tables.
Nancy O.

Spry Accordion default panel in Master Detail Page

Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
    <div class="AccordionPanelContent">
        <table width="385" border="0" class="AccordionPanel" id="content1">
          <?php do { ?>
            <tr>
            <td >
               <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
               </td>
            </tr>
            <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
        </table>
    </div>
</div>
<script type="text/javascript">

</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!

PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben

Spry tabbed panel and scroll bar cross browser

Hi everybody, I would like to insert into a
site a
scroolbar like this
example1
or also like this
example2
but I have a problem:
The scrollabar works in the default tab, in the other tabs
it's impossible to view the tab's content.
I have found a similar problem looking around
here
but this solution did'nt work, probably because the example
is for a php site, my site instead is developed in ASP.
Does someone has a solution?I woul like to avoid to display
the default scrollbar using the property overflow:auto, because in
firefox the color attribute doesn't works and the graphic aspect is
very important.
Thank you very much.

Hi cammellonellacruna,
Can you provide a link where the problem can be seen?
I've tried with IE 6,7 and Firefox 2 and couldn't see the
problem.
Also, try to put more content in the other tabs, to make the
scrollbars show up.
Thank you,
--Florin TUDOR
Adobe Spry Team

Spry Tabbed Panel and Master/Detail Page Set interraction

Similar Messages

Maybe you are looking for