HOWTO: a nice way to load dojo pages in a TabContainer

Submitted by MementoMori on Sat, 04/12/2008 - 12:47.

we want few words and more code...

index.html

<html>
<head>
<title>index </title>

<link rel="stylesheet" type="text/css" media="screen" href="static/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" media="screen" href="static/dojo/dojo/resources/dojo.css" />

<script type="text/javascript" src="static/dojo/dojo/dojo.js" djConfig="usePlainJson : true, isDebug:false, parseOnLoad: true"></script>

<script type="text/javascript">
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit._Calendar");
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");

</script>

</head>
<body class="tundra">
<div id="mainTabs" dojoType="dijit.layout.TabContainer" style="height:400px">
<div title="First" dojoType="dojox.layout.ContentPane" executeScripts="true">
Content
</div>

<div title="Widgets" dojoType="dojox.layout.ContentPane" executeScripts="true" href="widgets.html">
Content
</div>
</div>
</body>
</body>

widgets.html

<html>
<head>
<title>widgets</title>

<link rel="stylesheet" type="text/css" media="screen" href="static/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" media="screen" href="static/dojo/dojo/resources/dojo.css" />

<script type="text/javascript">

function init() {
var cal = new dijit._Calendar({},"calendar");
cal.startup();
}
dojo.addOnLoad(init);
</script>

</head>
<body class="tundra">

<div dojoType="dijit.layout.BorderContainer" style="width:100%; height:100%">
<div dojoType="dijit.layout.ContentPane" region="center">
BEFORE <div id="calendar"></div> AFTER
</div>
</div>

</body>

Login or register to post comments
Subscribe post

my 2 cents

Submitted by dinobhai on Sat, 04/12/2008 - 16:20.

when u are doin an href to widgets.html why in the widgets.html are you redefining the imports the body and style class from what i have seen u can trim down the linked html file as such

widgets.html

<html>
<script type="text/javascript">

function init() {
var cal = new dijit._Calendar({},"calendar");
cal.startup();
}
dojo.addOnLoad(init);
</script>

<div dojoType="dijit.layout.BorderContainer" style="width:100%; height:100%">
<div dojoType="dijit.layout.ContentPane" region="center">
BEFORE <div id="calendar"></div> AFTER
</div>
</div>
</html>

but am not sure if the script would run like this. also u can put the script in the index itsef and when the content pane is showed u can link it too. using dojo.connect.

Am not quite sure what r u looking at though

Dino

trimming

Submitted by MementoMori on Sat, 04/12/2008 - 17:16.

trimming everything in head but the script is better (and causes less problem..).
Putting the script in index.html and connecting to a function in widgets.html isn't a good practice imho because the index page should not be interested in what other pages actually do. This way every pages hadle their own script.

A strange beaviour is that if you change and return to the widget tab the widgets aren't showed anymore.

it works for me

Submitted by dinobhai on Sat, 04/12/2008 - 17:44.

I have twp tab panes in which i am doin this href thing i change back and forth but i can still see the widgets i am using ff2/ie6 netbens/tomcat 5.5

Dino

Html Page in Tabs

Submitted by psychx on Wed, 08/06/2008 - 16:48.

I CAN'T WORK OUT HOW TO POST BLOCKS OF CODE BELOW SO ALL HTML HAS BEEN REMOVED :(

I have an html page (called sometext.html) with the following in the body:

BEFORE

AFTER

the value of fivediv is set within the tags in the head by

function init() {
var five = 5;
document.getElementById('fivediv').innerHTML = five;
}
dojo.addOnLoad(init);

Viewing this page gives:
'BEFORE
5
AFTER'

I want to load this html page with the value '5' in one of my tabs. I am doing this in another file with:

Applications

Content

This gives:
'BEFORE
AFTER'

but does not include the number 5 from the div. This is an oversimplified example of what I am trying to do, but hopefully demonstates the point.

Search