Dojo:如何在页面加载时以声明方式显示模式对话框

Dojo:如何在页面加载时以声明方式显示模式对话框,dojo,Dojo,我已经在dojo中声明性地创建了模态对话框,我想在页面加载时向用户显示它,但我不明白为什么下面的代码在页面加载时没有在浏览器上显示任何内容。谁能告诉我我做错了什么 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Dijit!</title> <!-- load Dojo --> <link

我已经在dojo中声明性地创建了模态对话框,我想在页面加载时向用户显示它,但我不明白为什么下面的代码在页面加载时没有在浏览器上显示任何内容。谁能告诉我我做错了什么

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Dijit!</title>
    <!-- load Dojo -->

    <link rel="stylesheet" href="../lib/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="../../css/style.css">


    <script src="../lib/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
        <script>
     require(["dojo/ready","dojo/parser","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button"]);</script>
     </script>

</head>
<!-- set the claro class on our body element -->
<body class="claro">
  <div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
  <div class="dijitDialogPaneContentArea">
    <div class = "formQuestion">
         <span>Personal Details</span>
        </div>    
        <div>

          <label class = "firstLabel" for="Pname">Name </label>
          <input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
          data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
          <label class = "secondLabel" for = "combo">Role </label>
            <Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
                <option>Admin</option>
                <option>User</option>
            </Select><br>
            <label class = "firstLabel" for="Pemail">Email</label>
                <input type="text" id="Pemail" name="address" 
                    data-dojo-type="dijit.form.ValidationTextBox"
                    data-dojo-props = "placeHolder:'(will be the username)',
                    trim:'true',
                    ucfirst : 'true'" tabindex = '3'/>
            <label class = "secondLabel" for="Pmobile">Mobile</label>
                <input type="text" id="Pmobile" name="address" tabindex = '4'
                    data-dojo-type="dijit.form.ValidationTextBox"
                    data-dojo-props = " trim : 'true',
                    regExp : '(\\d){10}',
                    invalidMessage : 'Mobile number is invalid',
                    ucfirst : 'true'" /><br>
            <div dojoType="dojox.form.PasswordValidator"
            name="password">
            <div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
                pwType="new" tabindex = '5'/>
                <label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
                pwType="verify" tabindex = '6'/></div>
        </div><br>
<div class ="dijitDialogPaneActionBar">
            <button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
            <button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
            </div>
    </div>
    <!-- This event is not firing -->
    <script type="dojo/method" data-dojo-event="onLoad" >
        dialogOne.show();
    </script>
  </div>
 </body>
</html>​

尝试调用dialogOne.show在require函数的回调中,将dojo/ready更改为dojo/domrready!并将其放置在模块数组的末尾

尝试调用dialogOne.show在require函数的回调中,将dojo/ready更改为dojo/domReady!并将其放置在模块阵列的末尾

尝试以下代码。对加载的dojo部件进行更改,以指向dojo的正确路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Dijit!</title>
        <!-- load Dojo -->

        <link rel="stylesheet" href="../dijit/themes/claro/claro.css">


        <script src="../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
        <script>
            require(["dojo/ready","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button","dojo/domReady!"]
            , function(ready){
                ready(function(){
                    console.debug("Ready!");
                    dialogOne.show();
                });
            });
        </script>

    </head>
    <!-- set the claro class on our body element -->
    <body class="claro">
        <div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
            <div class="dijitDialogPaneContentArea">
                <div class = "formQuestion">
                    <span>Personal Details</span>
                </div>    
                <div>
                    <label class = "firstLabel" for="Pname">Name </label>
                    <input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
                    <label class = "secondLabel" for = "combo">Role </label>
                    <Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
                        <option>Admin</option>
                        <option>User</option>
                    </Select><br>
                    <label class = "firstLabel" for="Pemail">Email</label>
                    <input type="text" id="Pemail" name="address" 
                           data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = "placeHolder:'(will be the username)',
                           trim:'true',
                           ucfirst : 'true'" tabindex = '3'/>
                    <label class = "secondLabel" for="Pmobile">Mobile</label>
                    <input type="text" id="Pmobile" name="address" tabindex = '4'
                           data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = " trim : 'true',
                           pattern : '(\\d){10}',
                           invalidMessage : 'Mobile number is invalid',
                           ucfirst : 'true'" /><br>
                    <div dojoType="dojox.form.PasswordValidator"
                         name="password">
                        <div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
                                                                                             pwType="new" tabindex = '5'/>
                            <label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
                                                                                                        pwType="verify" tabindex = '6'/>
                        </div>
                    </div><br>
                    <div class ="dijitDialogPaneActionBar">
                        <button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
                        <button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>​

请尝试下面的代码。对加载的dojo部件进行更改,以指向dojo的正确路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Dijit!</title>
        <!-- load Dojo -->

        <link rel="stylesheet" href="../dijit/themes/claro/claro.css">


        <script src="../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
        <script>
            require(["dojo/ready","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button","dojo/domReady!"]
            , function(ready){
                ready(function(){
                    console.debug("Ready!");
                    dialogOne.show();
                });
            });
        </script>

    </head>
    <!-- set the claro class on our body element -->
    <body class="claro">
        <div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
            <div class="dijitDialogPaneContentArea">
                <div class = "formQuestion">
                    <span>Personal Details</span>
                </div>    
                <div>
                    <label class = "firstLabel" for="Pname">Name </label>
                    <input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
                    <label class = "secondLabel" for = "combo">Role </label>
                    <Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
                        <option>Admin</option>
                        <option>User</option>
                    </Select><br>
                    <label class = "firstLabel" for="Pemail">Email</label>
                    <input type="text" id="Pemail" name="address" 
                           data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = "placeHolder:'(will be the username)',
                           trim:'true',
                           ucfirst : 'true'" tabindex = '3'/>
                    <label class = "secondLabel" for="Pmobile">Mobile</label>
                    <input type="text" id="Pmobile" name="address" tabindex = '4'
                           data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = " trim : 'true',
                           pattern : '(\\d){10}',
                           invalidMessage : 'Mobile number is invalid',
                           ucfirst : 'true'" /><br>
                    <div dojoType="dojox.form.PasswordValidator"
                         name="password">
                        <div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
                                                                                             pwType="new" tabindex = '5'/>
                            <label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
                                                                                                        pwType="verify" tabindex = '6'/>
                        </div>
                    </div><br>
                    <div class ="dijitDialogPaneActionBar">
                        <button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
                        <button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>​

您的navigator开发人员控制台是否输出了一些内容?可能尝试将其设置为程序化。我只想知道为什么这不起作用。您的navigator开发人员控制台是否输出了一些内容?可能尝试将其设置为程序化。我只想知道为什么这不起作用。我在chrome控制台上收到一个错误:未捕获引用错误:dialogOne是没有定义。代码:需要[dojo/domReady!],函数{dialogOne.show;};我收到一条消息Uncaught TypeError:无法在控制台上调用undefined的方法'show'。添加id=dialogOne而不是data dojo id谢谢您的帮助。我的require函数有问题。现在它成功地在页面加载时显示模式对话框。需要[dijit/registry,dojo/dom,dojo/domReady!],functiondom,registry{dojo.readyfunction{dijit.byId'dialog.show;};};chrome控制台上出现错误:未捕获引用错误:未定义dialogOne。代码:需要[dojo/domReady!],函数{dialogOne.show;};我收到一条消息Uncaught TypeError:无法在控制台上调用undefined的方法'show'。添加id=dialogOne而不是data dojo id谢谢您的帮助。我的require函数有问题。现在它成功地在页面加载时显示模式对话框。需要[dijit/registry,dojo/dom,dojo/domReady!],functiondom,registry{dojo.readyfunction{dijit.byId'dialog.show;};};