Ask Gary: Spry Tabs
I got an email recently asking me about the little tutorial I wrote some time ago on Spry Tabs with Dynamic Content.
I have been trying to improve my website but the problem I have with Spry Tabs and Dynamic Content is that I don't want the tab to reload every time a user goes back to a previous tab but at the same time when the page loads for the first time I want to take advantage of the click on demand option by only loading the defaults tab. Can you think of a solution. My users scroll between tabs and don't want to lose the search results displayed in each tab.
The Problem
The problem here is really just a matter of remembering which of the tabs was clicked and no calling the Ajax load method if it has already been loaded.The 'old' HTML I used to define my tabs is as follows:
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="tab1.loadContent('tab1.cfm');return false;">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab2.loadContent('tab2.cfm');return false;">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab3.loadContent('tab3.cfm');return false;">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab4.loadContent('tab4.cfm');return false;">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="tab1"></div>
<div class="TabbedPanelsContent" id="tab2"></div>
<div class="TabbedPanelsContent" id="tab3"></div>
<div class="TabbedPanelsContent" id="tab4"></div>
</div>
</div>
The simplest approach here would be to call a function and pass the file and the tab to the function. This function would then have the job of remembering which of the tabs has been loaded and when not to load the tab.
Simple Solution
The simplest solution is to use an array to store the URLs of the dynamic content. Then inside the function check the contents of the Array for the url, if its not in the array push it onto the array and load the tab content.Here is the new JavaScript function.
<script>
loaded = new Array();
function getTab(tab,url){
if (loaded.toString().search(url)==-1){
loaded.push(url);
tab.loadContent(url);
}
}
</script>
After that we just need to change the HTML a bit to call our new function instead of the Spry Method.
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="getTab(tab1,'tab1.cfm');return false;">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="getTab(tab2,'tab2.cfm');return false;">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="getTab(tab3,'tab3.cfm');return false;">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="getTab(tab4,'tab4.cfm');return false;">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="tab1"></div>
<div class="TabbedPanelsContent" id="tab2"></div>
<div class="TabbedPanelsContent" id="tab3"></div>
<div class="TabbedPanelsContent" id="tab4"></div>
</div>
</div>
Lastly we need to update our Tab initialization script so that when the window is loaded our fist tab is also loaded using the new function.
<script type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 0 });
var tab1 = new Spry.Widget.HTMLPanel("tab1");
var tab2 = new Spry.Widget.HTMLPanel("tab2");
var tab3 = new Spry.Widget.HTMLPanel("tab3");
var tab4 = new Spry.Widget.HTMLPanel("tab4");
getTab(tab1,'tab1.cfm');
</script>
Now instead of making an Ajax request each time a tab is clicked it's made only once per browser load.
Happy Coding...
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
Converting structkeys to lowercase
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
There are no comments for this entry.
[Add Comment]