Using Control.Tabs with AJAX call

[Lars Ruoff]

Hi,
I have started to use Control.Tabs on my webpages.
Works fine.
Now I'd like to return part of a page that contains a tab element as
result of an AJAX-call.
That is, the tab HTML stuff will be returned in the AJAX call and
replaces a div in an existing page.
This doesn't work, as the Javascript part that creates the Tabs
control (new Control.Tabs('tabs_example_one');) is not getting
executed.
How to do this the best way?
I thought about running the code in an OnSuccess-handler of the AJAX
call.
But i'm uncomfortable with the idea that "new Control.Tabs" is being
called every time the AJAX call is being run. since it will only
repalce existing information.
That is, an existing tabs will be replaced by another tabs.
How do i get this to work?

[Walter Lee Davis]

I haven't tried this, but often when you see "new ..." there is a return value that you can assign to a variable. See what happens if you start with

var tabs = new Control.Tabs...

This may leave you with a variable "handle" that you can re-use later, so your Ajax call wouldn't create a new instance of the tabs, just pick up the one that's there.

Walter

>
> --
> You received this message because you are subscribed to the Google Groups "LivePipe UI Users" group.
> To post to this group, send email to livepipe...@googlegroups.com.
> To unsubscribe from this group, send email to livepipe-ui-us...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/livepipe-ui-users?hl=en.
>

[Lars Ruoff]

Hi Walter,
thanks, that might be an option.
But i think it depends on the implementation of Control.Tabs in order
to know what needs to be done.
Probably the "new" call does some DOM modification for the tabs
sections that needs to be redone every time new tab data is loaded.
I guess i have no choice other than to have a detailed look into the
code of Control.Tabs.

If someone else has successfully used that with AJAX, please let me
know.

regards,
Lars

[Lars Ruoff]

Hi,
i have now come up with the following code:

function loadField(field_id) {
var active_link = 'first';
if (typeof(field_tabs) != "undefined") {
active_link = field_tabs.activeLink;
delete field_tabs;
}
new Ajax.Updater('pane2', '/field/'+field_id+'/', {
method: 'get',
onComplete: function() {
field_tabs = new Control.Tabs('field_tabs');
field_tabs.setActiveTab(active_link);
},
parameters: {ajax: 1} });
}

This works almost.
As you can see I try to retain the active tab.
This works in the sense that the shown tab content after the AJAX
replacement corresponds to that of the previously active tab.
But the tab itself, (i.e. the link on top) does not get the "active"
class assigned for some reason and thus stays unselected.
That is, after the AJAX call, the content is good, but active the tab
isn't highlighted any more as before.
Anyone got a clue what i am missing here?

[Lars Ruoff]

For sake of completeness, here is how i got it to work like i want.
(Don't know whether this is "good style" though)

function loadField(field_id) {
var active_tab_index = 0;

if (typeof(field_tabs) != "undefined") {

active_tab_index = field_tabs.links.indexOf(field_tabs.activeLink)

delete field_tabs;
}
new Ajax.Updater('pane2', '/field/'+field_id+'/', {
method: 'get',
onComplete: function() {
field_tabs = new Control.Tabs('field_tabs');

field_tabs.setActiveTab(active_tab_index);