我有一个使用 dojo 来检查dijit/Dialog
表单结果的有效 JavaScript 页面。
<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>
我想将表单中的脚本移动到页面底部,以便可以将其与另一个页面集成。
(此代码由 PHP 生成,我使用 heredoc 包含来自 dojotools 示例的代码。)
我尝试了以下代码:
<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>
这会导致页面上出现以下内容(从 Chrome 开发人员工具中复制,其中控制台未显示任何语法错误):
<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>
在这种情况下,on()
处理程序似乎没有被调用。显示“我”按钮出现。
如果单击它,它将显示带有 Foo 字段的表单。如果您在该字段中输入一个值并单击“确定”按钮,该表单就会消失。但是没有消息发布到控制台。
有没有人建议为什么脚本将作为表单的一部分工作,而不是作为页面上的单独调用?
原始代码来自 dijit/Dialog 页面 ( https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html#dijit-dialog ) 的“对话框中的表单和功能”部分。