Saturday, March 24, 2012

Load on demand tabpanel

Hi there,

I wonder how to create some tabs with following requirement:
1. Load a tab's contain at the first times when it selected (except the first tab)
2. After the first load, you can chose another tab, and when you come back previous tab, it does not load again.

You can meet this requirement in "Related" Tab at 'New Post' page in this forum

Please help me by any link, artical, sample code, etc...

Thank you very much!

I'd like to do this too. Someone's gotta have a solution for this
I am also curious how this is done. It would be very useful to reduced the initial loading time of a page to not have to load the entire contents of the tabs before the page is presented to the user. I didn't see any OnActive event for TabPanels. Am I missing something?
OnActive event is not solution for this problem. It's?very easy when you want to create tabpanel with "Loading?style" on a tab actived. But, when you loaded a tab,?and?come?back?after?select?other?tab,?it will?load?again.

The main problem is: how to show loaded tab, but don't load again.
This is my solution for Tabpanel load tab on demand problem:
I create a Web method, which will return a string.
I call this method by Javascript (view Ajax tutorial at Asp.net)
In onComplete(arg) function, I saved return string (arg variable) in Javascript's variable.
On OnClientClick I call TryLoad javascript function to render my string to a div tab from memory

 /* Author: Do Quoc Khanh Email: doqkhanh@.gmail.com */ var flagArray=new Array(20); var contentArray = new Array(20); //Define var unLoaded = 0; var Loaded = 1; //Save current tabid var currentTab; var displayObj; function showValue(id, value) { document.getElementById(id).innerHTML = value; } function isFirstTime(currentTab) { if (flagArray[currentTab] == Loaded) { return true; } return false; } function tryLoad(displayobjectid, inputparam, tabid) { currentTab = tabid; displayObj = displayobjectid; if(isFirstTime(currentTab)) { //Fill info to obj value from memory showValue(displayObj,contentArray[currentTab]); } else { //Execute load process Test.GetCategories(inputparam, onComplete, onError, onTimeout); } } function onComplete(arg) { //Check loaded flag flagArray[currentTab] = Loaded; //Save to memory contentArray[currentTab] = arg; //Fill info to obj innerhtml from memory showValue(displayObj,arg); } function onError(arg) { alert('Error'); } function onTimeout(arg) { alert('Time out'); }

No comments:

Post a Comment