Dojo is not working

Question

I am new at dojo and here is my code:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css"></link>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/tundra/tundra.css"></link>
    <link rel="stylesheet" type="text/css" href="../../../../resources/themes/default/styles/layout.css" th:href="@{/resources/default/styles/layout.css}"></link>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>

    <script type="text/javascript" src="../../../resources/dev/scripts/Spring.js" th:src="@{/resources/spring/Spring.js}"></script>
    <script type="text/javascript" src="../../../resources/dev/scripts/Spring-Dojo.js" th:src="@{/resources/spring/Spring-Dojo.js}"></script>


 <div id="gridContainer" style="width: 100%; height: 400px;"></div>

    <script type="text/javascript">
        dojo.require('dojo.store.JsonRest');
        dojo.require('dijit.layout.ContentPane');
        dojo.require("dijit.form.Button");
        dojo.require('dojox.grid.DataGrid');
        dojo.require('dojo.data.ObjectStore');
        dojo.require('dijit.form.TextBox');
        dojo.require('dojox.data.AndOrReadStore');
        dojo.require('dojo._base.xhr');
        dojo.require('dojo.json')
        dojo.require('dojo.domReady');

        dojo.ready(function() {

            var appLayout = new dijit.layout.ContentPane({
                            id: "appLayout"
                            }, "appLayout");

            var textBox = new dijit.form.TextBox({
                        name: "searchbox",
                        placeHolder: "Search ..."
                        });

            textBox.placeAt('appLayout');              
            appLayout.placeAt('gridContainer');

            appLayout.startup();     
        });
    </script>

firefox tells me that there is an error:

TypeError: d is null
(undefined="[object Object]", undefined="null")ContentPane.js (línea 4)
(undefined="[object Object]", undefined=""appLayout"")_WidgetBase.js (línea 4)
(undefined="[object Object]", undefined=""appLayout"")dojo.js (línea 104)
()home (línea 16)
()dojo.js (línea 237)
()dojo.js (línea 236)
(undefined="1000")dojo.js (línea 237)
[Detener en este error] b._contentSetter&&b._contentSetter.par...=u.getLocalization("dijit","loading",

any help would be appreciated.

Answer 1

You're doing some strange things. What I suppose is that you want a TextBox inside a ContentPane, if i'm not right, then forget the following answer.

There are several mistakes in this code:

While creating your appLayout contentpane, you're providing the second argument (which you use to put "appLayout" in. This argument is used to define the DOM node (or the ID of the DOM node) that should be used to place the contentpane at. You don't have a DOM node with an ID called appLayout. For more information look at the API documention which says that the second parameter is the srcNodeRef. The solution is to leave this parameter empty.

Then the second mistake is that you're placing the TextBox inside the ContentPane even before it was placed on the DOM itself and started up. So re-arranging your code so the ContentPane is placed on the grid container first will work.

The complete code, with changes:

dojo.require('dojo.store.JsonRest');
dojo.require('dijit.layout.ContentPane');
dojo.require("dijit.form.Button");
dojo.require('dojox.grid.DataGrid');
dojo.require('dojo.data.ObjectStore');
dojo.require('dijit.form.TextBox');
dojo.require('dojox.data.AndOrReadStore');
dojo.require('dojo._base.xhr');
dojo.require('dojo.json')
dojo.require('dojo.domReady');

dojo.ready(function() {

    var appLayout = new dijit.layout.ContentPane({
        id: "appLayout"
    });
    appLayout.placeAt('gridContainer');
    appLayout.startup();

    var textBox = new dijit.form.TextBox({
        name: "searchbox",
        placeHolder: "Search ..."
    });
    textBox.placeAt('appLayout');              
});

Or as a JSFiddle. The startup is probably not required to be able to place the TextBox, but now the code is grouped a bit better.

I would also like to suggest to update your code to use the asynchronous syntax (Dojo 1.7+) since the syntax you're using is deprecated since 1.7 and since you're using 1.9 I don't see any benefit from writing new code with the old syntax since it will not work in Dojo 2.0.