Question

I am working with a TabContainer having several different ContentPane children. Each of them is equipped with a href param to fetch external AJAX content shown when a tab is being selected:

dojo.addOnLoad(function() {
    var tc_nav = new dijit.layout.TabContainer({
        style: 'width: 98%;',
        doLayout: false
    }, 'tc_nav');

    var cp1 = new dijit.layout.ContentPane({
        title: 'Test 1',
        href: 'ajax?test1',
        style: 'padding: 10px;',
        selected: true
    });

    dojo.connect(cp1, 'onShow', function() {
        cp1.refresh();
    });

    /*
     * ...
     */

    tc_nav.addChild(cp1);

    /*
     * ...
     */

    tc_nav.startup();
});

Now I want to integrate a tab among the others which should be different in its behaviour: Instead of loading content into a ContentPane the tab should follow a simple link in the same window (like a <a href="http://www.google.com/">Link</a>), leaving the page containing the js/dojo app. I didn’t find any satisfying solution yet, nor a dojo widget matching this requirement. What would be the best approach?

As an unpleasant workaround I created an overridden onShow event firing a window.location.href = '...';:

var cp2 = new dijit.layout.ContentPane({
    title: 'Test 2',
    style: 'padding: 10px;'
});

dojo.connect(cp2, 'onShow', function() {
    window.location.href = 'http://www.google.com/';
});

An annoying disadvantage of this workaround is the fact the ContentPane is loaded first and afterwards the window.location.href is set, which leads to a quite peculiar lazy reload effect and consequently to a bad user experience. I would like to avoid this intermediate step.

Answer 1

A possible workaround to meet the above mentioned requirements is to override the onClick event of the ContentPane‘s controlButton:

/*
 * ...
 */

var cp2 = new dijit.layout.ContentPane({
    title: 'Test 2',
    style: 'padding: 10px;'
});

/*
 * ...
 */

tc_nav.addChild(cp2);

/*
 * ...
 */

tc_nav.startup();

/*
 * ...
 */

cp2.controlButton.onClick = function() {
    window.location.href = 'http://www.google.com/';
};

Please note not to attach another function to the onClick event (e. g. by dojo.connect(cp2.controlButton, 'onClick', function() { /* ... */ });), but rather to override it, otherwise the ContentPane‘s content would be called up first.

Please note further the TabContainer‘s startup() function has to be invoked first to make the controlButton object accessible.