DOJO: Destroy then create a ContentPane

There may be instances where you may need to destroy an existing dojo ContentPane then replace it with a new ContentPane and place it in the same container div element.

Since all of this may also occur after the DOM (web page) has been rendered, you will also need to parse the widget to execute any javascipt code you may have in the new ContentPane. An example scenario is when your new ContentPane invokes a JSP page with a javascript code for an ajax call (nested ajax calls).

Here is a simple javascript function to destroy then create a ContentPane.

function destroyCreateContentPane() {
      
      // destroy the existing content pane 
      dijit.byId("cpId").destroyRecursive();

      // get the containing div element
      var containerDiv = dojo.byId("divContId");

      // create the new content pane (widget) and set the values for it's id and class properties
      var cpWidget = new dojox.layout.ContentPane({
                  id:"cpId",
                  class:"cpClass",
      });

      // use the contentpane's 'domNode' property to get the top level DOM node of the new contentpane widget (the visible representation of the widget)  
      var cpDiv = cpWidget.domNode;

      // put the new contentpane div as the last node of the containing div 
      dojo.place(cpDiv, containerDiv, 'last');

      cpDiv.id = "cpId";

      // optional: hide the new empty div
      cpDiv.style.display = "none";

      // parse the new contentpane widget
      dojo.parser.parse(dojo.byId('cpId'));

}