Load content on demand or in portions

Hi,

I have large chunks of text (400-500Kb) that are loaded inside update panel when user clicks on a tree node with the book name. It works fine and all. The only thing is that the text is first downloaded to client and then shown - the user will have to wait for the whole 400Kb of text to download. Is there a way to show the first 5-10Kb of text once it has reached the client and keep loading the reast while user is reading?

And one more question - is this ok that Page_Load() event is fired every time UpdatePanel is updated?

Hi abolotnov,

To start with your last question it is normal that the page_load event get fired when you are doing a partial update. The trick is within the rendering of the HTML, so thats correct. What kind of control is inside your UpdatePanel (treeview?) You can use a updateprogress control to make clear to the user that the page is still updating. Can you past some code here so we can analyze your code. Thanks

Regards,

yeah, I know I can use UpdateProgress control to tell the user that the page is still updating... this is not I really want though -

say I have this UpdatePanel with DIV inside of it and need the text in DIV to be updated. The text is 400K - quite a lot for people with slow internet connection (dialup for example). I want them to be able to start reading the text before it's downloaded in whole. Say, if their connection speed is 4K/sec, they will be able to start reading in 1 second - 4K of text gives them enough to read before the rest is downloaded - another 4k will come next second etc.

What I have now is when the update starts use sees this message "content for reading pane is being updated, please wait" untill the whole portion of text is downloaded and then rendered. For people on slow internet connections it takes quite a while 400/4 secs.

Don't ask me why I can't split the text into smaller portions and allow users to page through the text - I will if there is no way to sort out what I want.

Thanks for any comments you may have on this.

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'); }

Load on Demand Feature for Accordion Panes

I'm attempting to set up an Ajax Accordion as an alternative to another Treeview. However, due to the sheer amount of data I may have to deal with, I need the data to only load into the Panes when the pane is selected to decrease the initial page load. Can anyone provide and suggestions or advice?

the AccordionBehavior exposes methods like add_selectedIndexChanging, add_selectedIndexChanged and some others that might be useful. Open up the AcccordionBehavior.js file from the toolkit download, it's incredibly well documented. Anyway, just add a function of your own design during pageLoad() which calls a pagemethod or web service to populate the data and your cooking with gas.

Paul

Thanks Paul, but just so we are clear on this, my objective is to prevent all of the data from loading at the pageload but have it load when the Pane is opened. Thanks for the input.

Right, and I understood. You wire to the event during pageLoad, so that when the event fires (selectedIndexChanging, for example), you get the data you need.

Hi Paul, I was reviewing this thread and trying to make sense of how delegates and event wireups are implemented in ASP.NET AJAX to achieve exactly what the original poster was trying to achieve, but with a deeper twist--I'm developing a nested accordion user control.

What is the syntax to wiring to the event (click) during pageLoad and if this is a user control, how do I go about accessing the pageLoad event from the control? In reviewing the AccordionBehavior.js file and trying to interpret what I'm looking at, the _headerClickHandler is created as a delegate for the _onHeaderClick method and wired up to the header click event via $addHandler. Does asp.net ajax client side scripting support multicast delegates? In other words, how can I go about having one click event execute two methods without having either method reference the other?

I hope I'm being clear in this explanation. I ultimately would like to extend the behavior outside of the script file so as to not modify the original control.

There's pretty detailed coverage of what you're asking here: http://www.asp.net/AJAX/Documentation/Live/overview/AJAXClientEvents.aspx but to give you my spin / synopsis, here you go:

Accessing pageLoad event from user control: There's a few different ways to skin this cat. What I like to do is use a ScriptManagerProxy to load a javascript file that has all your client logic for the control in it. IN that you have a function that you want to call as the control's load function, and then the line: Sys.Application.add_load(yourfunction); You also have to finish with the usual call to Sys.Application.notifyScriptLoaded();. Now, the downside to this is that (I think) you'll end up overwriting each of these functions on each control instance (if you have more than one per page, I mean). This is what makes custom script controls better than user controls, they handle that deconfliction for you. To avoid what I'm talking about, your best bet is still to use the usercontrol's javascript file to define a clientside class, and then define each class instance in the page's pageLoad handler.

Multicast deleages. In short, yes. $addHandler does just what it says, it adds a handler to a list of functions to fire when the event occurs. The Function.createDelegate call is not *quite* what a delegate is in .Net terms, what it does is fix some scopign problems that otherwise can occur in javascript. Typically when you use the keyword 'this' inside an event handler, 'this' refers to the event sender, not necessarily the function's parent object (which is often what you want).

Also, for what its worth you might just create a class that extends their js accordion class. They've set up inheritance features for just that purpose. http://www.asp.net/AJAX/Documentation/Live/tutorials/EnhancingJavaScriptTutorial.aspx