Skip navigation

Spry Framework for Ajax (READ ONLY)

Up_in_the_Air Calculating status...

Currently Being Moderated

Spry Tabbed Panel Defaults to home page with recordset paging

Jan 26, 2010 7:04 PM

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?

1216 Views 3 Replies Latest reply: uandme72, Oct 16, 2011 11:00 AM

Replies

Currently Being Moderated

1. Arnout Kazemier,

Jan 27, 2010 6:57 AM in reply to Up_in_the_Air

Report

A few things you could try. Either save the current state with a cookie (http://go.spry-it.com/cookie)

Or what I would suggest is using a extra URL parameter on your paging buttons. See example code here: http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.h tml#TabbedPanels1

|
Mark as:
Currently Being Moderated

2. Up_in_the_Air,

Jan 29, 2010 7:38 AM in reply to Up_in_the_Air

Report

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.

|
Mark as:
Currently Being Moderated

3. uandme72,

Oct 16, 2011 11:00 AM in reply to Up_in_the_Air

Report

I want to paginate the output from an asp page (recordset with some tables etc) within a particular tab, without changing the tab. However, the pagination code is available on the output asp page, and not on the asp page having the tabbed panel.
When we click the next link on the output (placed inside the content portion of the tabbed panel), it should not open outside the tabbed panel, but the same tab should display the next set of records as per the offset values.
Please advise.

The code i am using is given below.

<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=two class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

|
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