Home/ Questions/Q 8650517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T13:50:31+00:00

When I setup dojoConfig with async: true , my DateTextBox doesn’t get rendered, but

  • 0

When I setup dojoConfig with async: true, my DateTextBox doesn’t get rendered, but
when I use async: false everything works fine; But I need async mode for to be able to use AJAX long time polling. How can I resolve this issue so my control is rendered?

Here is my code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style>
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
</style>
<script>dojoConfig = {async: true}</script>
<script src='dojo/dojo.js'>
</script>
<script>
require(["dojo/ready", "dijit/form/Button", "dojo/dom", "dijit/registry"], function(ready, Button, dom, registry){
    ready(function(){
        // Create a button programmatically:
            var myButton = new Button({
                label: "button"
            }, "topButton");
    });
});


require(["dojo/ready", "dijit/form/Button", "dojo/dom"], function(ready, Button, dom){
    ready(function(){
        // Create a button programmatically:
        var myButton = new Button({
            label: "button"
        }, "leftButton");
    });
});

require(["dojo/ready", "dijit/form/DateTextBox", "dojo/dom", "dojo/parser"], function(ready, DateTextBox, dom, parser){
    ready(function(){
        // Create a button programmatically:
        var dateTextBox = new DateTextBox({
            value: new Date(2009, 0, 20)
        }, "centerPicker");
    });
});

require(["dojo/ready", "dijit/form/Button", "dojo/dom"], function(ready, Button, dom){
    ready(function(){
        // Create a button programmatically:
        var myButton = new Button({
            label: "button"
        }, "bottomButton");
    });
});

require(["dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],
        function(ready, registry, BorderContainer, ContentPane){
            ready(function(){
                var appLayout = new BorderContainer({
                    design: "headline"
                }, "appLayout");
                 
                appLayout.addChild(
                    new ContentPane({
                        region: "top",
                        content: registry.byId("topButton")
                    })
                );
                appLayout.addChild(
                    new ContentPane({
                        region: "left",
                        content: registry.byId("leftButton")
                    })
                );
                appLayout.addChild(
                    new ContentPane({
                        region: "center",
                        content: registry.byId("centerPicker")
                    })
                );
                appLayout.addChild(
                    new ContentPane({
                        region: "bottom",
                        content: registry.byId("bottomButton")
                    })
                );
                 
                // start up and do layout
                appLayout.startup();
            });
        });
</script>
</head>
<body class="claro">
<style>
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#appLayout {
    height: 100%;
}
</style>
<div id="appLayout" class="demoLayout"></div>
<button id="topButton" type="button"></button>
<button id="leftButton" type="button"></button>
<div id="centerPicker"></div>
<button id="bottomButton" type="button"></button>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you build a layer of your dependencies, this issue will perish. Problem is, that the DateTextBox has more dependencies then the BorderContainer – and therefore the require of inputelement finishes downloads later then the require in your layout..

    This in turn makes dojo.ready queue the callbacks in a ‘wrong’ fashion, other then what you had hoped for. The .ready has a list of functions to call, once all dependencies are downloaded – but it is ordered in the way your script queues it.

    To overcome this you could use a ‘mutex’, because in some odd situations – the order could be queued as you design needs.. You must make logic similar to:

    1. give the ContentPane with region:center an id.
    2. if registry.byId(centerPicker) != undefined: centerRegionContentPane.addChild(registry.byId(centerPicker)) in the layout section.
    3. If registry.byId(centerRegion) != undefined: registry.byId(centerRegion).addChild(centerPickerWidget) under datebox section.
    • 0