PDA

View Full Version : TabPanel: loading content w/out AJAX



mapo
7 Jan 2007, 12:46 PM
Hi,
I have a TabPanel with 3 tabs. When I click on the third one I would like to reload the whole page (and then show the new page with the third tab activated). I am a bit confused since I didn't find an example for this case (maybe because I'm wrong :) ). What's the best pattern to do that? Can I do it w/out using AJAX (setUrl(...)) ?

Thank you!

Massimo

tryanDLS
7 Jan 2007, 1:01 PM
Not sure why you'd want to do this, b/c you're essentially saying rebuild the page from scratch. You don't want to do an Ajax request, you just want to do a HTTP Get on some page (or the same page). You'd then have to pass something back so your page load routine would know to activate the 3rd tab. Obviously you're going to somehow separate the click (which calls activate) from the activate (which does a page load), otherwise your just gonna loop everytime the page reloads and activates tab 3. You may want to rethink your flow - this idea doesn't seem to make sense.

mapo
8 Jan 2007, 11:16 AM
Well, let's put it like this. Actually I have 8 tabs and not 3, and the content of every tab requires a moderate amount of DB queries in order to be created. So I don't want to load the content of all the 8 tabs in one single request. The natural solution would be to lazy load the content through ajax requests. But I experienced some problems with this approach, especially with the extensive JS code that is included in my Ajax response. So a reasonable solution would be to reload the page when the tab gest clicked. This doesn't make sense? If I'm not wrong 99% of the pages out there work like this...!
Thank you fo the answer!

Massimo

tryanDLS
8 Jan 2007, 1:27 PM
Yes, but what's the point of having multiple tabs if every tab load is going to reload the page and wipe out the previously loaded tabs?

Animal
9 Jan 2007, 1:01 AM
Well, let's put it like this. Actually I have 8 tabs and not 3, and the content of every tab requires a moderate amount of DB queries in order to be created. So I don't want to load the content of all the 8 tabs in one single request. The natural solution would be to lazy load the content through ajax requests. But I experienced some problems with this approach, especially with the extensive JS code that is included in my Ajax response. So a reasonable solution would be to reload the page when the tab gest clicked. This doesn't make sense? If I'm not wrong 99% of the pages out there work like this...!
Thank you fo the answer!

Massimo

You can specify that scripts in Ajax responses are evaluated:

http://www.yui-ext.com/playpen/yui-ext.0.40/docs/

Specifically:

http://www.yui-ext.com/playpen/yui-ext.0.40/docs/output/YAHOO.ext.UpdateManager.html#update

Turned on for a specific instance of UpdateManager by:

http://www.yui-ext.com/playpen/yui-ext.0.40/docs/output/YAHOO.ext.UpdateManager.html#loadScripts

Turned on for all by:

YAHOO.ext.UpdateManager.defaults.loadScripts = true;

Manually update an Element:

http://www.yui-ext.com/playpen/yui-ext.0.40/docs/output/YAHOO.ext.Element.html#update

Tyyan is right. It's pointless having a tab if youaer reloading a page. It's just a link then! 99% of pages out there are non-Ajax.

mapo
9 Jan 2007, 7:24 AM
tryanDLS, Animal,

thank you very much for your help.
Actually I already tried to make the UpdateManager evaluate my scripts. But for some reasons it didn't evaluate all of them (e.g. some YAHOO's tooltips) although the code was correct (and correclty evaluated if rendered in a non-AJAX response).

Regarding you statements about tabs in a non AJAX world, of course I see your point and I see I'm somehow trying to misuse this excellent component.

Massimo

tryanDLS
9 Jan 2007, 7:27 AM
If the scripts you load via loadScripts=true, also try to bring in new css files, the css is not going to be processed. You need to include those files in your base page. There are a couple of threads regarding this if you need more info.