PDA

View Full Version : Nested Tabs



tarnawska
6 Apr 2007, 12:37 PM
I'm trying to do something apparently very simple; I just want a tabpanel with an ajax tab that contains another tabpanel.

I'm using Rails as my implementation language, so I'm afraid my examples are going to be a bit biased:

I have one view, the domain overview:


<div id="domain-tabs" class="xp"></div>

<script type="text/javascript">
var domaintabs = new Ext.TabPanel('domain-tabs');

var dns = domaintabs.addTab('dtabs-dns', "DNS");
dns.setUrl('<%= @domain.name %>/dns?ajax=true');

var sites = domaintabs.addTab('dtabs-site', "Sites");
sites.setUrl('<%= @domain.name %>/web?ajax=true');

var mail = domaintabs.addTab('dtabs-mail', "Mail");
mail.setUrl('<%= @domain.name %>/mail?ajax=true');

var db = domaintabs.addTab('dtabs-db', "Database");
db.setUrl('<%= @domain.name %>/db?ajax=true');
domaintabs.disableTab('dtabs-db');
domaintabs.activate('dtabs-dns');
</script>

One of those views, the DNS view contains a second tab panel:


<div id="dns-tabs">
<div id="soa-form" class="tab-content"><%= render :partial => 'soa' %></div>
<div id="rr-form" class="tab-content"><%= render :partial => 'rr' %></div>
</div>

<script type="text/javascript">
var dnstabs = new Ext.TabPanel('dns-tabs');
dnstabs.addTab('soa-form', "SOA Record");
dnstabs.addTab('rr-form', "Resource Records");
dnstabs.activate('rr-form');
</scrip>

The result is a page that properly displays the 'domain-tabs' tabpanel, except that the 'dns-tabs' aren't displayed. There aren't any javascript errors, no tabs rendered, just the two tab-content divs rendered.

Can anyone see what I'm doing wrong? Any help would be appreciated.

Thanks!

- Ryan

neongrau
7 Apr 2007, 12:45 AM
as a first guess i'd say you need to pass scripts:true to your setUrl call

db.setUrl('<%= @domain.name %>/db?ajax=true',{scripts:true});

and btw.
what kind of writing urls is that?
shouldn't you better write it this way:


db.setUrl('<%= url_for(:controller => @domain.name, :action => :db, :ajax => true) %>',{scripts:true});