How do change the selected tab to another tab in code?

Submitted by agnostie on Wed, 06/04/2008 - 02:41.

I have been trying unsuccessfully to change the selected tab to another tab. Here is the scenario:
User has a page with a button on it followed by a tab container with 4 tabs. Tab number 4 is selected.
When user clicks on the button, I want tab number 1 to be selected.
This part works, in that it changes the selected value to tab number 1, but nothing happens in the browser to reflect the change:

var myTab4 = dojo.byId('tab4');
    myTab4.setAttribute('selected','false');
    var myTab1 = dojo.byId('tab1');
    myTab1.setAttribute('selected','true');

So now we try to get dojo to recognize that the actively selected tab has changed from tab 4 to tab 1:

var tabs = dijit.byId('tabContainer');
    tabs.startup();
    tabs.layout();
    tabs.postCreate();

    var liteMyTab = dijit.byId('tab1');
    liteMyTab.refresh();
    liteMyTab.resize();
    liteMyTab.startup();
    liteMyTab.postCreate();

None of the above works. The tabContainer ignores all my attempts to get it to realize the selected tab has changed.
There is probably a simple solution to this, any suggestions?

Login or register to post comments
Unsubscribe post

Use the TabContainer's selectChild() method

Submitted by wombat on Wed, 06/04/2008 - 07:18.

Don't try to play around with the indivual tabs. If "myTabContainer" is the id on your TabContainer div, then:

dijit.byId("myTabContainer").selectChild("tab1");

should be all you need to do. (You might need to change tab1's refreshOnShow and parseOnLoad attributes, depending on whether and when you you want the tab's contents refreshed.)

Thanks wombat! Problem solved!

Submitted by agnostie on Wed, 06/04/2008 - 17:33.

I searched the dojo book and the forums for a couple of hours and couldn't find this simple solution, thanks again.

learn something new every

Submitted by dante on Wed, 06/04/2008 - 17:39.

learn something new every day. I wasn't aware you could pass a string to selectChild(), I've always passed a widget ref (returned from dijit.byId('something')) ...

.selectChild is a method of StackContainer, a generic container widget that manages children. The layout widgets which have a "selectable child" (AccordionContainer, TabContainer, etc) use this. .addChild, .selectChild, .removeChild ...

Actually, the Dojo Book TabContainer page covers it, and claims you cannot pass a string:

http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/tab-contai...

I wonder if I should change my code

Submitted by wombat on Thu, 06/05/2008 - 06:18.

As you say, the documentation all says it should be a widget (and in fact when I started my first reply, from memory I thought the same, but then I checked my actual code). Having a quick peek at the source code, I see that passing a string works because the first line in the method is:
page = dijit.byId(page);

Given that selectChild seems to be the only *Child method that actually does this, I wonder if I can rely on it remaining there, or should I change my code to use dijit.byId in the call to selectChild? I'm not at all sure why I tried using a string in the first place - possibly just a slip of the fingers that luckily worked, or just following an example somewhere (though if that was it, I don't know where).

no, it's a patteren we've

Submitted by dante on Thu, 06/05/2008 - 10:34.

no, it's a patteren we've introduced. With the exception of dojo.connect(), anywhere you pass a string where you can pass a domNode, it runs through dojo.byId. I just hadn't noticed that one dijit function did that. It could be argued that dijit methods that accept a widget ref should accept a string id. It might be too much overhear in large apps, dijit.byId isn't exactly an alias to anything (like dojo.byId == document.getElementById) ...

Search