BasicDialog autoTabs with dynamic content

[sjivan]

I want to create a BasicDialog that gets content via the dialog.body's UpdateManager using a remote URL. The BasicDialog is created off a new empty genereted div id. (autoCreate)

The remote content has divs for tabs but the problem is that the BasicDialog seems to be trying to build the tabs only in the constructor so as a result the tabs are not created when I fetch dialog contents remotely.

I tried building the tabs myself by code in the UpdateManager's callback silimar to the yui example

var tabs = new YAHOO.ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');

however I notice that the height of each tab is only that of the content it holds and not the entire height of the dialog. Adding a 'height' style of 100% on each tab results in vertical scrollbars appearing.

Has anyone created tabs in an autoCreated dialog which gets content remotely via the dialog.body's UpdateManager?

Thanks,
Sanjiv

[jack.slocum]

You could try this, untested but should work:

First turn off autoTabs. This is only used in the constructor.

var dialog = ...;

var loadTabs = function(){
     var tabs = dialog.getTabs();// will create tabs bound to the correct element
     tabs.add('element-id'...
     tabs.add('element-id2'...
     tabs.activate('some-id');
};

dialog.body.load({url:'foo.php', params: 'foo=1&bar=2', callback: loadTabs});

Let me know if that works.

[sjivan]

I tried your suggestion but each tab is still only sized based on its content.

Sanjiv

[jack.slocum]

Try this:

var loadTabs = function(){
     var tabs = dialog.getTabs();// will create tabs bound to the correct element
     tabs.add('element-id'...
     tabs.add('element-id2'...
     tabs.activate('some-id');
     dialog.syncBodyHeight();  <-- add that
};

[jack.slocum]

Or this would be even faster since it bypasses dialog body size calculations:

tabs.syncHeight();

[sjivan]

cool, dialog.syncBodyHeight() does the trick.

tabs.syncHeight() almost does the job but the dialog botton size isn't factored for and the button displays a little off.

Is there anyway you can support autotabs with remote dialog contents in a simpler way. The current approach works but is not very intuitive.

Thanks,
Sanjiv

[moraes]

This thread was the perfect answer to my same question.

[jack.slocum]

There's a great update in SVN for you.

I removed the tab initialization from the dialog's constructor and created an "initTabs()" method. initTabs() reuses the existing tabs component or creates a new one if one doesn't already exist. It removes any existing tabs and reads for new ones.

It will have a problem if you overwrite the dialogs body (and the tab dom elements). So the solution may be to:

dialog.getTabs().bodyEl.load({url:...});
dialog.initTabs();

Give it a try and let me know if it works. What you load goes directly into the tabs body element, so it should only be ydlg-tab elements.

[moraes]

I'm not sure if I'm using the SVN version correctly. I could get it working with:

var renderContent = function(){
    dialog.initTabs();
};

dialog.body.load({url:'...', callback: renderContent});

The content loaded is:

<div id="tab1" class="ydlg-tab" title="Tab 1">
Test
</div>
<div id="tab2" class="ydlg-tab" title="tab 2">
Test2
</div>

I tried this instead of setting the callback but it didn't work:

dialog.getTabs().bodyEl.load({url:...});
dialog.initTabs();

So it seems that callback is necessary, right? Anyway, yes, this change helps *A LOT*. Now tabs can be automatic for dynamic content as well. Good, and thanks!

PS: no problem at all to use the callback. I have to initialize other things after the content is loaded, so it would be needed anyway.