4

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.

proximus
  • 689
  • 7
  • 20

2 Answers2

0

ContentPanes are not actually iframes, so setting window.location.href would change the url of your entire page (dojo app) not just the ContentPane. Have you tried something like this:

cp2.set('href', 'http://www.google.com/')
peller
  • 4,435
  • 19
  • 21
  • Maybe you misunderstood my question. I actually **want** to change the url of my entire page. The way you suggested would just XHR-load the contents of http://www.google.com/ into my `ContentPane` and present it iframe-like, which is the conventional behaviour of a `TabContainer`. – proximus Sep 15 '11 at 12:07
  • Yup, I misunderstood. How would you reload the entire page but leave your app in place? – peller Sep 15 '11 at 16:55
  • I don't want to leave my app in place, I just want to reload the entire page with certain url parameters. – proximus Sep 15 '11 at 17:09
0

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.

proximus
  • 689
  • 7
  • 20