CODEWITHSUNDEEP
javascriptdojo
Greg
Greg

Reputation: 1629

Does dojo TabContainer have an event thats triggered when changing tabs?

does DOJO TabContainer have an event thats triggered when changing tabs?

I imagine it would but I couldn't find anything about it in the documentation. :(

SOLVED: It looks like I found a solution here:

Dijit TabContainer Events - onFocus

not the most searchable topic title :/

Upvotes: 4

Views: 9388

Answers (4)

denov
denov

Reputation: 12696

From the docs;

var tabs = registry.byId('someTabs');
tabs.watch("selectedChildWidget", function(name, oval, nval){
    console.log("selected child changed from ", oval, " to ", nval);
});

Upvotes: 7

Richard
Richard

Reputation: 16802

Here's a complete code sample that works in Dojo 1.8, I've tested it. It's not an event that fires just on changing tabs, I couldn't get any of their events in the API to fire, but at least it works on the Click event.

require(["dijit/registry",  "dojo/on", "dojo/ready", "dojo/domReady!"], function (registry, on, ready) {
    ready(function () { //wait till dom is parsed into dijits
        var panel = registry.byId('mainTab');   //get dijit from its source dom element
        on(panel, "Click", function (event) {   //for some reason onClick event doesn't work 
            $('.hidden_field_id').val(panel.selectedChildWidget.id);  //on click, save the selected child to a hidden field somewhere. this $ is jquery, just change it to 'dojo.query()'
        });
    });
});

//include this function if you want to reselect the tab on page load after a postback
require(["dijit/registry", "dojo/ready", "dojo/domReady!"], function (registry, ready) {
    ready(function () {
        var tabId = $('.hidden_field_id').val();
        if (tabId == null || tabId == "")
            return;
        var panel = registry.byId('mainTab');
        var tab = registry.byId(tabId);
        panel.selectChild(tab);
    });
});

Upvotes: 0

Craig Swing
Craig Swing

Reputation: 8162

In addition to @phusick's answer, which is correct, all StackContainers, including the TabContainer publish on topics that you can subscribe to.

http://dojotoolkit.org/reference-guide/1.7/dijit/layout/StackContainer.html#published-topics

[widgetId]-addChild,
[widgetId]-removeChild
[widgetId]-selectChild

http://dojotoolkit.org/reference-guide/1.7/dojo/subscribe.html#dojo-subscribe

Upvotes: 3

phusick
phusick

Reputation: 7352

Connect aspect.after to TabContainer's selectChild method:

var tabContainer1 = registry.byId("tabContainer1");

aspect.after(tabContainer1, "selectChild", function() {
    console.log("tab changed");        
});

Or if you are interested in a particular tab, connect to its ContentPane's _onShow:

var contentPane1 = registry.byId("contentPane1");

aspect.after(contentPane1, "_onShow", function() {
    console.log("[first] tab selected");        
});

See it in action at jsFiddle: http://jsfiddle.net/phusick/Mdh4w/

Upvotes: 7

Related Questions