如何在网页中移动dojo脚本？

Question

I have a working JavaScript page that uses dojo to check the results of a dijit/Dialog form.

<div class="content">
    <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        require(["dijit/registry"],function(registry){
            e.preventDefault(); // prevent the default submit
            if(!myForm.isValid()){ alert("Please fix fields"); return; }
            var inputField = registry.byId("input-field");
            var resultVal = inputField.get("value");
            console.log("Would submit "+resultVal+" here via dojo/xhr.");
            window.alert("Would submit "+resultVal+" here via dojo/xhr.");
            myFormDialog.hide();
        });
    </script>
    <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
    </div>
    <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" type="submit">OK</button>
            <button data-dojo-type="dijit/form/Button" type="button"
                data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
    </div>
 </form>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
    myFormDialog.show();
</script>
</button>

</div>
<script>
  require(["dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", "dojo/on"]);';
</script>

I want to move the script in the form to the bottom of the page, so that I can integrate it with another page.

(This code is generated by PHP, and I use a heredoc to include code from a dojotools example.)

I tried the following code:

<div class="content">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
    <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
    </div>
    <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my-button" id="my-button" data-dojo-args="e">OK</button>
            <button data-dojo-type="dijit/form/Button" type="button"
                data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
    </div>
 </form>
</div>

<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
  <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
  </script>
</button>
</div>
<script>
require(["dojo/dom", "dojo/on", "dijit/registry", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", ],
function(dom, on, registry){
  on(dom.byId("my-button"), "click", function(e){
      e.preventDefault(); // prevent the default submit
      console.log("Reached on() function.");
  })
});
</script>

This results in the following on the page (copied from Chrome developer tools, where console does not show any syntax errors):

<div class="content">
  <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
    <form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
      <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
      </div>
      <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my-button" id="my-button" data-dojo-args="e">OK</button>
        <button data-dojo-type="dijit/form/Button" type="button"
          data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
      </div>
    </form>
  </div>
  <p>When pressing this button the dialog will popup:</p>
  <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
    </script>
  </button>
</div>
<script>
require(["dojo/dom", "dojo/on", "dijit/registry", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", ],
function(dom, on, registry){
  on(dom.byId("my-button"), "click", function(e){
      e.preventDefault(); // prevent the default submit
      console.log("Reached on() function.");
  })
});</script>

In this case, the on() handler does not appear to be called. The Show Me button appears.

If you click it, it shows the form with the Foo field. If you put a value in the field and click the OK button, the form disappears. But no message is posted to the console.

Does anyone have a suggestion why the script will work as part of the form, but not as a separate call on the page?

The original code comes from the "Forms and Functionality in Dialogs" section of the dijit/Dialog page ( https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html#dijit-dialog ).

Answer 1

First the on(dom.byId("my-button"), "click", function(e){...}) will not fire because it's attached to a dom not wich is replaced after by dojo parser ,

also you have declared the button with both data-dojo-id and id ,

note that data-dojo-id (don't use the minus - in naming here use underscore _ instead ) create a global element with this id in window object , so later you can access your element directly like here my_button.on(...)

while by the id it create a widget with widgetid=id in order to access it by dijit/registry .

Second : the important point is in order to access those widget here you should wait until they are all parsed , so using callback function dojo/ready to be sur that all widgets are correctly parsed ,

Soo in your case after the ready (widget parsed , there is no generated dom item with id="my-button" its replaced by the widget itselef ) thus the submit button will submit directly and no preventdefault actionned there also no message

See below working snippet :

 <script type="text/javascript"> dojoConfig = { isDebug: true, async: true, parseOnLoad: true } </script> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" /> <body class="claro"> <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none"> <form data-dojo-type="dijit/form/Form" data-dojo-id="myForm" action="#"> <div class="dijitDialogPaneContentArea"> <label for='foo'>Foo: </label> <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/ValidationTextBox"/> </div> <div class="dijitDialogPaneActionBar"> <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my_button" id="my-button" data-dojo-args="e">OK</button> <button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button> </div> </form> </div> <p>When pressing this button the dialog will popup:</p> <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me! <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> myFormDialog.show(); </script> </button> <script> require(["dojo/dom", "dojo/on", "dijit/registry", "dojo/ready", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox"], function(dom, on, registry, ready) { ready(function() { // my_button same as = registry.byId("my-button"); my_button.on("click", function(e) { e.preventDefault(); // prevent the default submit console.log("Reached on() function.",myForm.validate()); if(myForm.validate()) { //do som stuff here and then close dilaog } }); }); }); </script> </body>