AJAX Tabs Widget

[Phil Petree]

Hi All!

 

I'm now looking for/at tab controls that support ajax calls.  The few that I've found are pretty static in that you can assign tab "A" to a specific AJAX request but you have no ability to dynamically create/destroy tabs.

 

Think of the problem like this: you have a list of items (kits) and you want to view the contents of one of these kits so you click on the kit name and a user would expect a new tab to open and the contents of the kit to be displayed. The contents of the new tab will be a list of parts. Users will want to have more than one kit open at a time and, obviously, you don't want to download the contents of 10,000 kits.

 

Another, simplier example might be like an inbox that list your emails and when you want to view one you click it and a new tab opens displaying the contents of the email.

 

I found a great implementation by Rolan Franssen located here: http://roland.devarea.nl/work/tabs/

and you can easily assign ajax calls to tabs, dynamically create / delete tabs etc. which is perfect for what I need except for one small, seemingly simple thing... I can't figure out how to get it to create a tab AND load the content via an ajax request and his code is a little out of my league.

 

Does anyone know of a good tab control that can do this or has anyone modified Rolands code to do this?

 

Thanks!

 

Pete

P.S. http://scripteka.com/ seems broken just like Walters scroll bars were... using ie9, you can't scroll the widgets list down. 

 

 

 

[Phil Petree]

I managed to get Rolands tabs.js to work.  Essentially I added another parameter to the addPanel function called relationship and then used that in the new Element(). After Roland adds the Panel (creates a new tab) he calls openPanel which will inturn call the AJAX call back.  Once there it was easy to supply an AJAX script which then worked just like an existing tab... actually pretty cool.

[Victor]

 

I'm now looking for/at tab controls that support ajax calls.  The few that I've found are pretty static in that you can assign tab "A" to a specific AJAX request but you have no ability to dynamically create/destroy tabs.

LivePipe Control.Tabs: http://livepipe.net/control/tabs + somewhere on github is extended AJAXified version

or (based on LivePipe, added possibility to load content into tab via AJAX request)

http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.ui/js/ui/control.tabs.js?revision=322&view=markup

(it isn't self-sufficient, it requires CSS and other JS files from the same project - ask me for details if you want)

[Phil Petree]

Victor,

 

Thanks for the links... I'd already seen control.tabs and it doesn't appear to support ajax (if it does its not documented and the api makes no reference to it).

 

The one on sourceforge appears to be a fork of the control.tabs and also I do see references to ajax in the source, it has no documentation or examples and I'm afraid its beyond my abilities to decipher it.

 

The tabs.js I was using was working well but I hit a snag in it in that it has no callback after the ajax onSuccess so I have no ability to trigger other events... not sure what the workaround is... the author has an afterOpen: callback but it doesn't get called on new tabs with an ajax load.

 

Not sure where I will go from here... may switch the entire project to jq... may have to in order to meet the lauch date (2/1/2013).... this seems to be the sticking point however as all the other functionality is stubbed in.

 

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/e6ESu2NmfY4J.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.