5

I followed the dojo tutorial to show a "Terms and Conditions" dialog. The dojo version is 1.7.0. I tested the example in chrome. In my test page I right click to show a menu then select item "Inspect Element". I found an error message in tab console. The error message is:

Uncaught TypeError: Cannot call method 'show' of undefined
showDialogdialog
(anonymous function)
onclickdialog

Then I go to the dojo api page. I find dojo 1.7.0 no any methods under the class dijit.Dialog. So how to show dialog use dojo 1.7.0? Any idea? Thank you so much.

Improve this question

3 Answers 3

Reset to default
4

It seems to be a problem with Google CDN, because the tutorial example works fine with the local copy of Dojo 1.7.

Dojo loader loads the file Dialog.js, but cannot parse it, which results in "parser.js: 8 Uncaught Error: Could not load class 'dijit.Dialog'".

dijit.Dialog.show() method is missing because the Dialog widget is not instanced and dijit.byId("terms") returns "undefined".

To workaround this load dijit.Dialog class/file via script tag:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dijit/Dialog.js"></script>

I filled this issue into Dojo bug tracker: Ticket #14415.

Improve this answer
0
0

From the error message, the dialog object is undefined. You still use show function to display a dijit.Dialog. Double check whether the dijit.Dialog instance is created successfully.

Sample code:

var dlg = new dijit.Dialog({
    id: "myDialog",
    title: "Sample",
    content: "<div>Hello World!</div>"
});
dlg.show();

The reason that you can not see the show function in the api doc is because this show function is actually declared in a internal class dijit._DialogBase.

Improve this answer
1
  • seems like the API tool should be picking up inherited methods (and displaying them when the green 'in' button is on. Sounds like another bug, likely related to the AMD transition
    – peller
    Commented Dec 9, 2011 at 2:27
0

I have try dojo 1.7.1 and it's work with this code http://jsfiddle.net/nv4YC/ dojo 1.7.0 work too.

From your link (the dojo tutorial) it's have to change

dojo.require("dijit.Dialog");

and at the script tag should have async: true

like this data-dojo-config="async: true, parseOnLoad:true"

Let's see on my jsfiddle or try this code

<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
    data-dojo-config="async: true, parseOnLoad:true"></script>
    <script>
        require(["dijit/registry", "dijit/Dialog"], function (registry)
        {
            // Show the dialog
            showDialog = function showDialog()
            {
                registry.byId("terms").show();
            }
            // Hide the dialog
            hideDialog = function hideDialog()
            {
                registry.byId("terms").hide();
            }
        });
    </script>
</head>

<body class="claro">
    <button onclick="showDialog();">View Terms and Conditions</button>
    <div class="dijitHidden">
        <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'"
        id="terms">
            <p>
                <strong>Please agree to the following terms and conditions:</strong>
            </p>
            <div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:600px">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit
                    massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis
                    urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis
                    massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus
                    ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et
                    rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices.
                    Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat,
                    lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper
                    risus est et erat....</p>
            </div>
            <button onclick="hideDialog();">I Agree</button>
            <button onclick="alert('You must agree!');">I Don't Agree</button>
        </div>
    </div>
</body>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.