Programmatically controlling a Dojo Accordion
- by prule
I have a dijit.layout.AccordionContainer on my page which is defined in the html and created when dojo parses the page on load.
Then, as the user interacts with the page I use Ajax to retrieve data and programmatically populate the container (removing existing items first).
To illustrate my issue simply, here is some code that doesn't work:
function doit() {
var accordion = dijit.byId("accordionShell");
accordion.getChildren().each(function(item) {
accordion.removeChild(item);
});
for (i = 1; i < 5; i++) {
var d = new dijit.layout.AccordionPane({title:'hello', content:'world'});
accordion.addChild(d);
}
}
This fails, because only the first item in the accordian is visible. I think the others actually exist, but they are not visible so you can't do anything.
I've managed to get around it by:
Always ensuring there is 1 item in the accordian (so I never remove the first child)
Call accordian.layout() after changing the contents
So, this code "works" as long as you always want to see the first item, and don't actually expand any but the first one:
function doit() {
var accordion = dijit.byId("accordionShell");
var i = 0;
accordion.getChildren().each(function(item) {
if (i > 0) accordion.removeChild(item);
i++;
});
for (i = 1; i < 5; i++) {
var d = new dijit.layout.AccordionPane({title:'hello', content:'world'});
accordion.addChild(d);
}
accordion.layout();
}
I am using Dojo 1.2.0 - Anyone know what I am doing wrong?
