Dojo Widgets not rendering when returned in response to XhrPost

I am trying to capture the selected item in a Dijit Tree widget to render remaining part of the web page. Here is the code that captures the selected item and sends it to Django backend:

      <div dojoType="dijit.Tree" id="leftTree" store="leftTreeStore" childrenAttr="folders" query="{type:'folder'}" label="Explorer">
      <script type="dojo/method" event="onClick" args="item">
        alert("Execute of node " + termStore.getLabel(item));
        var xhrArgs = {
          url: "/load-the-center-part-of-page",
          handleAs: "text",
          postData: dojo.toJson(leftTreeStore.getLabel(item), true),
          load: function(data) {开发者_StackOverflow
            dojo.byId("centerPane").innerHTML = data;
            //window.location = data;
          },
          error: function(error) {
            dojo.byId("centerPane").innerHTML = "<p>Error in loading...</p>";
          }
        }
        dojo.byId("centerPane").innerHTML = "<p>Loading...</p>";
        var deferred = dojo.xhrPost(xhrArgs);
      </script>
    </div>

The remaining part of the page contains HTML code with dojo widgets. This is the code sent back as 'response' to the select item event. Here is a snippet:

<div dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs">
 <div dojoType="dijit.layout.BorderContainer" title="Dashboard">
   <div dojoType="dijit.layout.ContentPane" region="bottom">
    first tab
   </div>
 </div>
 <div dojoType="dijit.layout.BorderContainer" title="Compare">
  <div dojoType="dijit.layout.ContentPane" region="bottom">
    Second Tab
  </div>
 </div>
</div>

It renders this html 'response' but without the dojo widgets. Is handleAs: "text" in XhrPost the culprit here?

My guess would be that your Tabs and BorderContainer do not have a height. They won't automagically attach themselves to a parent container, you must be explicit about their size. dojo.parser.parse portion is required based on how you are injecting the content, though if "centerPane" were a ContentPane you could just attr("content", response) and the parsing would be done for you. Also, all BorderContainer's need a region="center" (one), and neither of your above snippets contain one.

Note that the .innerHTML field applies to DOM objects not to Dojo objects. I think you ought to use dojo.byId("centerPane").containerNode.innerHTML = ...

Added: I took a look at the documentation for dijit.byId and here is what it says:

dijit.byId is a function for looking up a specific widget by its assigned name (id). This function is similar to dojo.byId but whereas dojo.byId returns DOMNodes, dijit.byId returns a JavaScript object that is the instance of the widget.

This is the reason why it worked for you.