Javascript Can';t更新复制到对话框中的Dijit小部件
我正在慢慢建立一个包含表单的弹出对话框的功能。只有一个例外。在按钮上的onClick事件中,我想更新表单中的一个值。它更新值,但仅在输入表单的div(emailForm)中更新。我将div设置为显示,以便查看更新。如何在myDialog对象中更新它Javascript Can';t更新复制到对话框中的Dijit小部件,javascript,dojo,dijit.form,Javascript,Dojo,Dijit.form,我正在慢慢建立一个包含表单的弹出对话框的功能。只有一个例外。在按钮上的onClick事件中,我想更新表单中的一个值。它更新值,但仅在输入表单的div(emailForm)中更新。我将div设置为显示,以便查看更新。如何在myDialog对象中更新它 <div id="emailForm" Executive Director> <h1>Contact Form</h1> <p>Feel free to drop us a line.</p&g
<div id="emailForm" Executive Director>
<h1>Contact Form</h1>
<p>Feel free to drop us a line.</p>
<form id="contact-form" action="confirmation.php" method="post">
<fieldset class="contact-fieldset">
<ol>
<li>
<label for="to">To:</label>
<input id="to" name="to" type="text" size="40" value="Staff" disabled>
</li>
<li>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
</li>
</ol>
<input type="submit" class="contact-submit" value="Send">
</fieldset>
</form>
</div>
<script>
require(["dojo/dom",
"dijit/Dialog",
"dijit/form/TextBox",
"dijit/form/Textarea",
"dojo/domReady!"],
function(dom, Dialog, TextBox, TextArea)
{
toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
messageText = new TextArea({placeholder: "Your message"},message);
var emForm = dom.byId("emailForm").innerHTML;
myDialog = new Dialog({
title: "My Dialog",
content: emForm,
style: "width: 600px"
});
});
require(["dijit/form/Button",
"dojo/domReady!"],
function(Button)
{
var showEmailBtn = new Button({
onClick: function(evt){
toText.set("value","Executive Director");
myDialog.show(); } },
"showEmail");
});
</script>
联系方式
请随时给我们写信
致:
信息:
需要([“dojo/dom”,
“dijit/Dialog”,
“dijit/form/TextBox”,
“dijit/form/Textarea”,
“dojo/domReady!”],
函数(dom、对话框、文本框、文本区域)
{
toText=新文本框({readOnly:“readOnly”,value:“Staff”},“to”);
messageText=新文本区域({占位符:“您的消息”},消息);
var emForm=dom.byId(“emailForm”).innerHTML;
myDialog=新建对话框({
标题:“我的对话”,
内容:emForm,,
样式:“宽度:600px”
});
});
需要([“dijit/form/Button”,
“dojo/domReady!”],
功能(按钮)
{
var showEmailBtn=新建按钮({
onClick:函数(evt){
toText.set(“价值”、“执行董事”);
myDialog.show();}},
“showEmail”);
});
更新
根据tik27对问题的描述,我尝试了以下测试:
<script>
require(["dojo/dom",
"dijit/Dialog",
"dijit/form/TextBox",
"dijit/form/Textarea",
"dojo/domReady!"],
function(dom, Dialog, TextBox, TextArea)
{
var emForm = '<div id="emailForm" Executive Director><h1>Contact Form</h1><form id="contact-form" action="confirmation.php" method="post"><fieldset class="contact-fieldset"><ol><li><label for="to">To:</label><input id="to" name="to" type="text" size="40" value="Gereral" disabled></li></ol><input type="submit" class="contact-submit" value="Send"></fieldset></form></div>';
myDialog = new Dialog({
title: "My Dialog",
content: emForm,
style: "width: 600px"
});
toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
});
require(["dojo/dom",
"dijit/form/Button",
"dojo/domReady!"],
function(dom, Button)
{
var showEmailBtn = new Button({
onClick: function(evt){
toText.set("value","Executive Director");
myDialog.show(); } },
"showEmail");
});
</script>
需要([“dojo/dom”,
“dijit/Dialog”,
“dijit/form/TextBox”,
“dijit/form/Textarea”,
“dojo/domReady!”],
函数(dom、对话框、文本框、文本区域)
{
var emForm='Contact FormTo: ';
myDialog=新建对话框({
标题:“我的对话”,
内容:emForm,,
样式:“宽度:600px”
});
toText=新文本框({readOnly:“readOnly”,value:“Staff”},“to”);
});
需要([“dojo/dom”,
“dijit/form/Button”,
“dojo/domReady!”],
函数(dom、按钮)
{
var showEmailBtn=新建按钮({
onClick:函数(evt){
toText.set(“价值”、“执行董事”);
myDialog.show();}},
“showEmail”);
});
这就解决了问题。显示的html只是完整表单的一个小测试。如何将html与脚本分开,然后在不复制id的情况下将其引入?我查看了模板,但这似乎有些过分
更新2
同样,根据一些技巧27的建议,我尝试了以下方法:
<script id="emailHTML" type="text/template">
<div id="emailForm" Executive Director>
<!-- Same html as above in emailForm -->
</div>
</script>
<script>
require(["dojo/dom",
"dijit/Dialog",
"dijit/form/TextBox",
"dijit/form/Textarea",
"dojo/domReady!"],
function(dom, Dialog, TextBox, TextArea)
{
myDialog = new Dialog({
title: "My Dialog",
content: dom.byId("emailHTML").textContent,
style: "width: 600px"
});
toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
});
require(["dojo/dom",
"dijit/form/Button",
"dojo/domReady!"],
function(dom, Button)
{
var showEmailBtn = new Button({
onClick: function(evt){
toText.set("value","Executive Director");
myDialog.show(); } },
"showEmail");
});
</script>
需要([“dojo/dom”,
“dijit/Dialog”,
“dijit/form/TextBox”,
“dijit/form/Textarea”,
“dojo/domReady!”],
函数(dom、对话框、文本框、文本区域)
{
myDialog=新建对话框({
标题:“我的对话”,
内容:dom.byId(“emailHTML”).textContent,
样式:“宽度:600px”
});
toText=新文本框({readOnly:“readOnly”,value:“Staff”},“to”);
});
需要([“dojo/dom”,
“dijit/form/Button”,
“dojo/domReady!”],
函数(dom、按钮)
{
var showEmailBtn=新建按钮({
onClick:函数(evt){
toText.set(“价值”、“执行董事”);
myDialog.show();}},
“showEmail”);
});
浏览器会忽略文本/模板脚本中的任何内容,因此id只会添加一次到DOM中。请在此网站上搜索有关脚本类型的详细信息。执行此操作的方式存在的问题是,最终会出现id为“to”的输入。ID在html中应该是唯一的。如果您想这样做,我建议您将表单信息放入带有type=“text/template”的脚本标记中 但是,有没有一个不以声明方式创建它的原因呢
<div id="emailForm" data-dojo-type="dijit.Dialog" style="display:none">
<h1>Contact Form</h1>
<p>Feel free to drop us a line.</p>
<form id="contact-form" action="confirmation.php" method="post">
<fieldset class="contact-fieldset">
<ol>
<li>
<label for="to">To:</label>
<input data-dojo-type="dijit.form.TextBox" data-dojo-props="readOnly: 'readOnly' , value:'Staff'" id="to" name="to" type="text" size="40">
</li>
<li>
<label for="message">Message:</label>
<textarea id="message" name="message" data-dojo-type="dijit.form.Textarea" data-dojo-props="placeholder: 'Your message'"></textarea>
</li>
</ol>
<input type="submit" class="contact-submit" value="Send">
</fieldset>
</form>
</div>
<div id="showEmail">Show</div>
<script>
require(["dijit/form/Button",
"dijit/registry","dojo/dom",
"dijit/Dialog",
"dijit/form/TextBox",
"dijit/form/Textarea"],
function(Button,registry)
{
var showEmailBtn = new Button({
onClick: function(evt){
registry.byId("emailForm").show();
registry.byId("to").set("value","Executive Director");
} }, "showEmail");
});
</script>
联系方式
请随时给我们写信
致:
信息:
显示
需要([“dijit/form/Button”,
“dijit/registry”、“dojo/dom”,
“dijit/Dialog”,
“dijit/form/TextBox”,
“dijit/form/Textarea”],
功能(按钮、注册表)
{
var showEmailBtn=新建按钮({
onClick:函数(evt){
registry.byId(“emailForm”).show();
注册表。byId(“to”)。设置(“值”、“执行董事”);
}},“showEmail”);
});
Fiddle::您在Fiddle上的代码解决了这个问题,但我更喜欢使用编程方法来保持html的整洁。我甚至使用TWIG预处理器将php排除在html之外。理想情况下,当禁用Javascript时,我还希望在独立网页上使用该表单。通过将其转换为脚本标记,您的意思是在其周围使用?如果将diplay:none移出表单,如果没有javascript支持,dojo将不会解析和隐藏表单。您将得到一个常规html表单。您遇到的问题是重复的ID,因为它们应该是唯一的dojo没有考虑到可能有2个并更新它找到的第一个ID,如果您想保持这种方式,我将使用类变量并使用dojo.query(“”)返回节点数组并更新隐藏表单和对话框中的表单。第三个选项是为对话框提供一个id,并使用registry.findwidgets(registry.byId(“dialogID”))获取对话框下的所有小部件。根据您对问题的描述,我添加了上面描述的一个成功的测试。虽然不是我正在寻找的解决方案,但您提供了足够的信息来设计我自己的解决方案。谢谢