TitlePane not rendering - working with basemapGallery sample code

Question

I am attempting to implement the basemapGallery code found in the API samples here.

There seems to be an issue with the TitlePane into which my basemapGallery is nested. It simply does not render. The basemapGallery appears in place and works as expected, but since the TitlePane does not exist in the app, it is not appearing as a child within the TitlePane, and instead just sits there, with no way to collapse.

Like the sample code, the basemapGallery is being created programmatically and the TitlePane is being created declaratively. Here is the JS code:

function init() {

var popup = new esri.dijit.Popup({
selectionSymbol: new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, new dojo.Color([255,0,0]))}, dojo.create("div"));

map = new esri.Map("map", {
    basemap: "topo",
    extent: new esri.geometry.Extent({xmin:-11420303.522028634,ymin:3387689.093598152,xmax:-6939259.175839653,ymax:6114962.262812516,spatialReference:{wkid:102100}}), 
    infoWindow: popup
});

dojo.connect(map, "onLoad", mapReady);

var basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: true,
    map: map
}, "basemapGallery");
basemapGallery.startup();

dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});

}
dojo.ready(init);

And the HTML:

<div style="position:absolute; right:20px; top:10px; z-index:999;">
    <div id="basemapSelector" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
        <div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
        <div id="basemapGallery" ></div></div>
    </div>
</div>

Notes: I am using v3.3 of the API. I am referencing the claro.css stylesheet. I have included dojo.require("dijit.TitlePane"); I have included a screencap of what I see.

Answer 1

Figured it out! The problem was in the HTML - I was referencing the the API and the JS file that contained all my JS before the dojoConfig object was defined. One I moved those references below the dojoConfig object (and removed async: true from its properties), the TitlePane worked just fine.

So always make sure those script tags referencing the API and any separate JS file are placed after the script tag containing dojoConfig.