Home/ Questions/Q 9195193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:34:34+00:00

I am attempting to code a simple example of a Dojo dialog box. I

  • 0

I am attempting to code a simple example of a Dojo dialog box. I have copied the example shown in the Dojo reference here => http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html

My code is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Dialog Test</title>
        <script language="JavaScript" type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dojox.widget.Dialog");
                dojo.require("dijit.form.Button");
                dojo.require("dijit.layout.TabContainer")
                dojo.require("dijit.layout.ContentPane")
        </script>
    </head>
    <body>
        <div id="dialogOne" dojoType="dojox.widget.Dialog" title="My Dialog Title">
            <div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
                <div dojoType="dijit.layout.ContentPane" title="foo">Content of Tab "foo"</div>
                <div dojoType="dijit.layout.ContentPane" title="boo">Hi, I'm Tab "boo"</div>
            </div>
        </div>
        <p>When pressing this button the dialog will popup:</p>
        <button id="buttonOne" dojoType="dijit.form.Button">Show me!
            <script type="dojo/method" event="onClick" args="evt">
                // Show the Dialog:
                dijit.byId("dialogOne").show();
            </script>
        </button>
    </body>
</html>

When the page loads in a browser, the Dialog doesn’t work. I just see the text from the tabbed panes appear in the browser.

I’ve copied the code from the reference guide exactly so I’m very confused. Any suggestions?

Thanks.

James.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Dojo samples unfortunately tend not to work fully ‘as is’, but are bits of skeleton code that need wrapping up in various standard bits of ceremony.

    You’ve at least three things causing this not to work and render correctly. There may be other problems on top, but these will definitely cause it not to render:

    1. You need to link to a version of the core Dojo scripts. Linking to a CDN version is a simple way to go. e.g. <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>. Details are here: http://dojotoolkit.org/download/. Be sure to put this before your require scripting.
    2. Add a link to a Dijit theme style sheet (CSS file) in your page, otherwise none of the widgets will display correctly. e.g. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css‌​"/>
    3. Add a class attribute on the body element describing which theme you want to use. e.g. <body class="claro">.

    Only when you’ve done all those three things will it have a chance of working. There may be other problems too, but they’re the fundamental three.

    • 0