xcandiottix Posted July 2, 2010 Share Posted July 2, 2010 Hello I'm trying to learn JS and implementing it with ajax. I am building a php page that includes a dreamweaver Spry object that creates a tabbed table. You can navigate thru the tabs without a page refresh. Like this: PHP Page echo $_POST['status'] Include Spry table Tab 1 Tab 2 status = "hello" status = "Goodbye" Submit Submit Now, if a user hits submit on tab1 the whole page refreshes and would post "Hello". If the user goes to tab 2 and hits submit "Goodbye" would be echoed .. this all works already. My problem is I want to page to refresh and stay on the same tab it was on when the use hit submit. So, When hitting submit on Tab2 the page would refresh and still show Tab2 instead of defaulting to page one. Can anyone help? or let me know what code they need to see? I'd imagine I would need to code a small event on 'when the tab is clicked' that passes the current tab to the next page. Could i place a cookie or POST a var with a hidden field perhaps? Thanks Link to comment https://forums.phpfreaks.com/topic/206471-spry-tab-table/ Share on other sites More sharing options...
xcandiottix Posted July 2, 2010 Author Share Posted July 2, 2010 I was looking thru the Spry's .js and I found this code block which looks like where I would put some code to pass which tab is being clicked: Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab) { this.showPanel(tab); return this.cancelEvent(e); }; Link to comment https://forums.phpfreaks.com/topic/206471-spry-tab-table/#findComment-1080055 Share on other sites More sharing options...
xcandiottix Posted July 2, 2010 Author Share Posted July 2, 2010 This code is above my previous post, it sets the default page.. if I change the number the default tab switches accordingly on page refresh: Spry.Widget.TabbedPanels = function(element, opts) { this.element = this.getElement(element); this.defaultTab = 0; // Show the first panel by default. this.tabSelectedClass = "TabbedPanelsTabSelected"; this.tabHoverClass = "TabbedPanelsTabHover"; this.tabFocusedClass = "TabbedPanelsTabFocused"; this.panelVisibleClass = "TabbedPanelsContentVisible"; this.focusElement = null; this.hasFocus = false; this.currentTabIndex = 0; this.enableKeyboardNavigation = true; this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT; this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT; Link to comment https://forums.phpfreaks.com/topic/206471-spry-tab-table/#findComment-1080064 Share on other sites More sharing options...
xcandiottix Posted July 2, 2010 Author Share Posted July 2, 2010 Got it. I've seen a bunch of requests for this on my google searching so hopefully this helps someone out. I did a JS,php,cookie solution but I'm sure you could use alternative methods to accomplish the same thing. SpryTabbedPanels.js: Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex) { var tpIndex = -1; if (typeof elementOrIndex == "number") tpIndex = elementOrIndex; else // Must be the element for the tab or content panel. tpIndex = this.getTabIndex(elementOrIndex); if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount()) return; var tabs = this.getTabs(); var panels = this.getContentPanels(); var numTabbedPanels = Math.max(tabs.length, panels.length); for (var i = 0; i < numTabbedPanels; i++) { if (i != tpIndex) { if (tabs[i]) this.removeClassName(tabs[i], this.tabSelectedClass); if (panels[i]) { this.removeClassName(panels[i], this.panelVisibleClass); panels[i].style.display = "none"; } } } this.addClassName(tabs[tpIndex], this.tabSelectedClass); this.addClassName(panels[tpIndex], this.panelVisibleClass); panels[tpIndex].style.display = "block"; this.currentTabIndex = tpIndex; document.cookie = "index="+tpIndex; <-- INSERT THIS LINE }; MyPage.php (where the SPRY include is): <script src="../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> <link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" /> <BODY onLoad="javascript:TabbedPanels1.showPanel(<?php echo $_COOKIE['index'];?>)"> <--INSERT THIS LINE <div id="TabbedPanels1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> And that's it. When a panel is selected it will write a cookie on the visitors machine with whatever page they are looking at. When they refresh the page, PHP gets the value from the cookie and JS tells the SPRY to alternatively load that number tab. Keep it mind that the first tab is tab #0, tab two is #1, etc. Enjoy! Link to comment https://forums.phpfreaks.com/topic/206471-spry-tab-table/#findComment-1080102 Share on other sites More sharing options...
davidcriniti Posted September 29, 2011 Share Posted September 29, 2011 Spent a while googling to try and find a solution to this, so despite it being an old topic, I just wanted to say thanks for posting your solution xcandiottix! A very grateful, Dave Link to comment https://forums.phpfreaks.com/topic/206471-spry-tab-table/#findComment-1273816 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.