2012-05-15 2 views
0

Я создал модальное диалоговое окно декларативно в додзё, и я хочу показать его пользователю при загрузке страницы, но я не понимаю, почему следующий код не является отображение чего-либо в браузере при загрузке страницы. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно?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>​ 
+0

Разве ваша консоль разработчика навигатора выводит что-то? – jbduzan

+0

Нет, это не так. – Dusk

+0

может попытаться установить его программно – jbduzan

ответ

2

Попробуйте вызвать dialogOne.show() в обратном вызове функции require, изменить "dojo/ready" в "dojo/domReady!" и поместить его в конце массива модуля

+0

Я получаю сообщение об ошибке на хром-консоли: «Неотдача ReferenceError: dialogOne не определена». Код: Dusk

+0

попробуйте dijit.byId ('dialogOne'). Show(); – jbduzan

+0

Я получаю сообщение «Uncaught TypeError: не может вызывать метод« show undefined »на консоли. – Dusk

4

Попробуйте код ниже. Внесите изменения в догрузовую часть загрузки, чтобы указать правильный путь вашего додзё.

<!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>​ 
Смежные вопросы