Programmatically controlling a Dojo Accordion
Posted
by prule
on Stack Overflow
See other posts from Stack Overflow
or by prule
Published on 2009-02-25T23:44:49Z
Indexed on
2010/03/25
2:03 UTC
Read the original article
Hit count: 520
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?
© Stack Overflow or respective owner