Linking to a specific tab / contentpane with Dojo

Question

I want to navigate from a link on a html site to another where a TabContainer with two different tabs is located.

I have one tab selected by default (which I want to keep) in the destination html file.

How do I have to put the link so that this is working? I found several documents on the net but nothing works. So probably someone needs to explain this to me the dumb way.

Here is the destination TabContainer:

<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="Contact" selected="true">
some text
</div>
<div dojoType="dijit.layout.ContentPane" title="Imprint" selected="true">
some text
</div>

I want to place a link to autmatically be navigated to the title "Imprint".

Can someone help?

Thanks a lot and all the best TTP

Answer 1

You can either select it from javascript, or generate the markup for the tab from your server with the selected attribute to true (you'll need to set the other to false). This second alternative, depends on your server technology.

For the first option, add ids to the container and tabs and select the tab when the page finished loading. Something like:

<div id="tabContainer" dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
  <div id="tab1" dojoType="dijit.layout.ContentPane" title="Contact" selected="true">
    some text
  </div>
  <div id="tab2" dojoType="dijit.layout.ContentPane" title="Imprint" selected="false">
    some text
  </div>
</div>

<script>
  dojo.ready(function() {
    dijit.byId('tabContainer').selectChild(dijit.byId('tab2'));
  });
</script>

If you want to dynamically select either tab, you'll need to pass some kind of parameter in the URL to your page. You can use a query parameter (variables after the ? symbol) or a hash fragment (anything after #). Query parameter you can read both from the server and from javascript. Hash fragments, only from javascript.

You can access those parameters by inspecting the location object. For example, using a hash fragment, you'd link to your page like http://host/page.html#imprint. Then in the <script> tag above:

<script>
  dojo.ready(function() {
    if (location.hash == '#imprint') {
      dijit.byId('tabContainer').selectChild(dijit.byId('tab2'));
    }
  });
</script>

For query parameters, also see dojo.queryToObject().