chart not rendering in programmatically created tab, which links to another page with setHref()

Submitted by Patrick Conway on Tue, 07/08/2008 - 09:34.

I creating a web page which displays charts, in tabs.

The tabs are created programmatically when a button is pressed.

I just create a tab and set the href to a page which is where the chart is created.

this is how I create the tab:-

javascript function in head of page 1

var node1=document.createElement("div");

var devel = new dijit.layout.ContentPane({id:"develTab",closable:"true",position:"relative",refreshOnShow:"true",title:"development overview"},node1);
devel.setHref("developmentoverview.jsp");
var tabCont = dijit.byId("tabs");
tabCont.addChild(devel);
tabCont.selectChild(devel);

this is how I create the chart:-

javascript function in head of page 2

createPie=function(){
var chart2 = new dojox.charting.Chart2D("deverrors");
chart2.setTheme(dojox.charting.themes.PlotKit.red);
chart2.addPlot("default", {
type: "Pie",
font: "normal normal bold 12pt Tahoma",
fontColor: "black",
labelOffset: 70
});
chart2.addSeries("Series A", <%=series%>);
chart2.render();

};

dojo.addOnLoad(createPie);

in the body of page 2 I have div with id="deverrors"

If I load page 2 directly then the chart renders fine

but if I create a tab with href page 2, the charts do not render in the tab

How do I make the charts render when the tab is created?

Login or register to post comments
Subscribe post

Try using

Submitted by Helmchen on Tue, 07/08/2008 - 11:05.

Try using dojox.layout.ContentPane instead of dijit.layout.ContentPane, since the latter does not execute Javascript.

That fixed it thanks

Submitted by Patrick Conway on Tue, 07/08/2008 - 13:06.

That fixed it thanks Helmchen

actually its not entirely fixed - sorry

Submitted by Patrick Conway on Tue, 07/08/2008 - 13:47.

Ok now when I'm using Safari Browser the charts render
But with Firefox they don't

Also in both, I cannot close the tab or click on other tabs.

I have also changed all ContentPanes to dojox instead of dijit

this is the current version of the function

Submitted by Patrick Conway on Tue, 07/08/2008 - 14:42.

developmentTab =function(){

var node1 =document.createElement("div");

var devel = new dojox.layout.ContentPane({},node1);

devel.setAttribute("id","DEVoverview");
devel.setAttribute("closable","true");
devel.setAttribute("title", "development overview");
devel.setHref("developmentoverview.jsp");

var tabCont = dijit.byId("tabs");
tabCont.addChild(devel);
tabCont.selectChild(devel);
}

If I do it like so

developmentTab =function(){

var node1 =document.createElement("div");

var devel = new dojox.layout.ContentPane();

devel.create({},node1);
devel.setAttribute("id","DEVoverview");
devel.setAttribute("closable","true");
devel.setAttribute("title", "development overview");
devel.setHref("developmentoverview.jsp");

var tabCont = dijit.byId("tabs");
tabCont.addChild(devel);
tabCont.selectChild(devel);
}

The tab is blank, i.e no chart, tables etc just whitespace

but the tab controls work , i can close it and select other tabs

try it this way.

Submitted by ttrenka on Tue, 07/08/2008 - 14:56.

developmentTab =function(){
var node1 =document.createElement("div");
node1.setAttribute("id","DEVoverview");
var devel = new dojox.layout.ContentPane({
closable: true,
title: "development overview"
},node1);
devel.setHref("developmentoverview.jsp");

var tabCont = dijit.byId("tabs");
tabCont.addChild(devel);
tabCont.selectChild(devel);
}

still same as the first case above

Submitted by Patrick Conway on Tue, 07/08/2008 - 16:38.

I tried as suggested ttrenka, but it's the same result, I cannot close the tab or select other tabs

fixed

Submitted by Patrick Conway on Thu, 07/10/2008 - 09:07.

I removed all the duplicate dojo.requires and javascripts which were in both the page with the tab and the second page in the href

it works then

Search