dojox.Standby not showing until .hide() is called

Question

I'm trying to use a dojox.widget.Standby. I want the standby to display whilst some other code is executing, and then hide once complete. However my standby only seems to display when I call standby.hide(). Code below:

    standby = new dojox.widget.Standby({
    target : "map-id"
});

        <div id="map-id" class="centerPanel"
        data-dojo-type="dijit.layout.ContentPane"
        data-dojo-props="region: 'center', style: 'width: 1300px;'">
        <span id="toolbar"></span>
        <div id="co-ords" style="position:absolute; bottom:0px; z-index:1000; font-size:8; font-weight:bold; background-color: #FFFFFF"></div>
    </div>

Anyone know what's going on? I'm also struggling to catch the onShow event using dojo.connect...

    dojo.connect(standby, "onShow", function(){
    console.log("standby onShow");
})

Thanks!

Update - calling standby.hide() shows my widget in FireFox but not Chrome

Answer 1

Does the code wrapped in between the show and hide calls happen to be synchronous xhrget/xhrpost ajax calls? When sync=true all browser action stops completely, and thus the standby animation would only show and hide really quick after the ajax calls are finished, at the same time you are calling .hide(). If so and you have multiple calls that need to act synchronously, then you can just make them async and chain them together in their response functions.

Answer 2

I have found that I always need to add the following line when creating the standby widget:

dojo.body().appendChild(standby.domNode);

Answer 3

If you really need the synchoronous call, instead of using standby, you can try doing this way...

dojo.byId('loading_status').innerHTML='Loading 0%...';
sync_ajax_call_1();
dojo.byId('loading_status').innerHTML='Loading 25%...';
sync_ajax_call_2();
dojo.byId('loading_status').innerHTML='Loading 50%...';
sync_ajax_call_3();
dojo.byId('loading_status').innerHTML='Loading 75%...';
sync_ajax_call_4();
dojo.byId('loading_status').innerHTML='Loading 100%...';

dojo.byId can also be substituted with dom.byId or $ (in jquery) or getElementById

Answer 4

also make-sure that map-id element has also height grater than zero at the time of the standy startup. It's common a standby to work correctly, but it is inside an element that has no height or no width or none of the two, so finally nothing is showing up.