Не удается обновить виджет диджета, скопированный в диалоговом окне

Question

Я медленно наращиваю функциональность всплывающего диалогового окна, содержащего форму. Он работает с одним исключением. В событии onClick на кнопке я хочу обновить значение в форме. Он обновляет значение, но только в div (emailForm), который был введен в форму. У меня есть набор div для отображения, чтобы я мог видеть обновление. Как обновить его в объекте myDialog?

<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> 

Update

Основываясь на описании 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> 

Это устраняет проблему. Показанный html - это всего лишь небольшое испытание полной формы. Как я могу сохранить html отдельно от скрипта, а затем привести его без дублирования идентификатора? Я заглянул в шаблоны, но это кажется излишним.

Update 2

Опять же, основываясь на некоторых Tik27 предложил, я попытался это:

<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> 

браузер игнорирует все в сценарии текст/шаблон так идентификаторы добавляется лишь один раз в DOM , Выполните поиск на этом сайте для получения дополнительной информации о типе сценария.

Answer 1

Проблема здесь в том, как вы это делаете, заключается в том, что входы заканчиваются на id = "to". Идентификаторы должны быть уникальными в html. Если вы хотите сделать это таким образом, я предлагаю вам поместить вашу информацию о форме в тег скрипта с типом = «текст/шаблон».

Но есть ли причина, по которой вы просто не создаете ее декларативно?

<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> 

Fiddle :: http://jsfiddle.net/ZJ735/