Geek Answers Handbook

Why can't dojo 1.7 show a dialog?

I accompanied the dojo tutorial to display the Terms of Use dialog box. The dojo version is 1.7.0. I checked the example in chrome. On my test page, right-click to display the menu, then select Inspect Element. I found an error message in the tab console. Error message:

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

Then go to the dojo api page . I find dojo 1.7.0 no methods under the class dijit.Dialog. So, how to show the interactive use of dojo 1.7.0? Any ideas? Thank you very much.

+5
source share
3 answers

, Google CDN, Dojo 1.7.

Dojo Dialog.js, , "parser.js: 8 : " dijit.Dialog ".

dijit.Dialog.show() , Dialog , dijit.byId( "terms" ) "undefined".

dijit.Dialog class/file script:

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

Dojo : Ticket # 14415.

+4

undefined. show dijit.Dialog. , dijit.Dialog.

:

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

, show api doc, , show ​​ dijit._DialogBase.

0

dojo 1.7.1 http://jsfiddle.net/nv4YC/ dojo 1.7.0 .

( dojo)

dojo.require("dijit.Dialog");

script async: true

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

jsfiddle

<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>

0

More articles:


All Articles