Programmatically controlling a Dojo Accordion

Question

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:

1. Always ensuring there is 1 item in the accordian (so I never remove the first child)
2. 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?

Answer 1

I believe I found one problem - accordian.removeChild() is not enough. If you destroy it, then the behaviour seems to be correct. I don't know if you have to do both or if destroy by itself is enough.

So, the code to remove existing items becomes:

accordion.getChildren().each(function(item) {
        if(i>0) {
            accordion.removeChild(item);
            item.destroy();
        }
        i++;
});

I'm working around this limitation by having 'help information' in the first item...

Answer 2

If Im not mistaking...you should do...

  pane1half = new dijit.layout.ContentPane({id: "pane1half", title: "hello", content: "world"});

87 accordion.addChild(pane1half, 1);

Answer 3

I would create a new AccordionContainer each time, add the AccordionPane children, then do:

oldAccordion.domNode.parentNode.replaceChild(
  newAccordion.domNode,
  oldAccordion.domNode
);

oldAccordion.destroyRecursive();
newAccordion.startup();