Dojo: Dynamically changing content of a ContentPane

The code sample below shows how to dynamically change a ContentPane dynamically based on onClick event, where cp variable is a reference to the Dojo ContentPane object and fileName holds the new content to be placed within the ContentPane. The most important line to focus on in the small example below is cp.attr(...) as this shows how to properly add new content within cp (versus the usual innerHTML we are accustomed to in normal JavaScript).

function onClick_Services(moduleID, fileName) {

     var cp = dijit.byId( moduleID );

     cp.destroyDescendants();

     cp.attr("href", fileName);

}

An example for when to use something like this is shown below, where a click on an item in the left navigation, will dynamically update the content of the main workspace (ContentPane) without the need to reload the page and thus turns the web application into a desktop type of applications.

Example for implementation

More explanation:

The initial implementation of the code used innerHTML to replace the ContentPane content with a new one  for a TabContainer. The TabContainer didn't show up properly. After investigation, it was clear that innerHTML doesn't perform the necessary cleanup as well as initialization for new widgets added to a ContentPane for example, the ContentPane resize() is not executed and thus widgets will not display properly.

Recommendation from Karl Bishop (Web2.0 SME):

The first thing I do is destroy any existing widgets within the ContentPane. This is not the best way to do it, but since we're not tracking our widgets, its effective enough. There's still potential for memory leaks for any connections (dojo.connect()) linked onto the widgets being destroyed. the next thing done is to just reload the content using the href attribute. The ContentPane will automatically handle any resizing required based on the new content, as well as instantiating any declarative widget.