title: Dojo domConstruct.create won't create element on postCreate
body: <p>I'm new to Dojo and I'm making my first widget to be used in EPiServer CMS. 
  The widget is supposed to dynamically add contacts when clicking on a button. This means that the only control my templateString has is a button. When clicking on it I call a function that creates all of the other controls that will contain the contact infomation, such as name, email etc. This is working fine, I use domConstruct.create without a problem. </p>
  
  <p>Thing is, when I want to create the existing contacts based on the value that comes from the server I can't manage to use domConstruct.create, it just returns "undefined". I'm making the call in the postCreate event which happens after the DOM is ready. (I've tested this as well). Does anyone have a clue what could be wrong?  Like I said creating the controls when clicking on the Add button works like a charm.</p>
  
  <p>The function that throws the error is: </p>
  
  <pre><code>postCreate: function () {
              // call base implementation
              this.inherited(arguments);
  
              //this._loadContacts(this.value);
              var node = domConstruct.create("fieldset", { id: "test" }, "cccp"); //this simple create instruction returns undefined here. 
  
              //Bind button
              this.connect(this.btnAdd, "onclick", dojo.partial(this._createContact, new Object()));
  
          },
  </code></pre>
  
  <p>Exactly on the line that does the domConstruct.create. Below is the entire code for the widget:</p>
  
  <pre><code>define([
      "dojo/_base/array",
      "dojo/_base/connect",
      "dojo/_base/declare",
      "dojo/_base/lang",
      "dojo/dom-construct",
      "dojo/on",
  
  
      "dijit/_CssStateMixin",
      "dijit/_Widget",
      "dijit/_TemplatedMixin",
      "dijit/_WidgetsInTemplateMixin",
  
      "epi/epi",
      "epi/shell/widget/_ValueRequiredMixin"
  ],
  function (
      array,
      connect,
      declare,
      lang,
      domConstruct,
      on,
  
      _CssStateMixin,
      _Widget,
      _TemplatedMixin,
      _WidgetsInTemplateMixin,
  
      epi,
      _ValueRequiredMixin
  ) {
      var amountContacts = 0;
      var contactContainerPrefixName = "contactInfo";
  
      return declare("meridian.editors.StringList", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {
  
          templateString: "&lt;div class=\"dijitInline\"&gt;\
                              &lt;form id=\"cccp\" action=\"\"&gt;\
                              &lt;/form&gt;\
                              &lt;button id=\"btnAdd\" data-dojo-attach-point=\"btnAdd\" type=\"button\" class=\"\"&gt;Add Contact&lt;/button&gt;&lt;br/&gt; \
                              &lt;span&gt;${helptext}&lt;/span&gt;\
                          &lt;/div&gt;",
  
          baseClass: "epiStringList",
  
          helptext: "Place items on separate lines",
  
          intermediateChanges: false,
  
          value: null,
  
          multiple: true,
  
          onChange: function (value) { },
  
          _onChange: function (value) {
              this.onChange(value);
          },
  
          postCreate: function () {
              // call base implementation
              this.inherited(arguments);
  
              //this._loadContacts(this.value);
              var node = domConstruct.create("fieldset", { id: "test" }, "cccp"); //this simple create instruction returns undefined here. 
  
              //Bind button
              this.connect(this.btnAdd, "onclick", dojo.partial(this._createContact, new Object()));
  
          },
  
          isValid: function () {
              // summary:
              //    Check if widget's value is valid.
              // tags:
              //    protected, override
  
              return !this.required || lang.isArray(this.value) &amp;&amp; this.value.length &gt; 0 &amp;&amp; this.value.join() != "";
          },
  
  
          _loadContacts:function(data)
          {
              for (var i = 0; i &lt; data.length; i++) {
                  this._createContact(data[i]);
              }
          },
  
  
          _createContact:function(data)
          {
              //increase the number of contacts
              amountContacts++;
              var contactInfoContainer = contactContainerPrefixName+amountContacts;
  
              //Create container for contact data
              var contactInfo = domConstruct.create("fieldset", { id: contactInfoContainer }, "cccp");
  
              //Create container for PROPERTIES
              var contactInfoProperties = domConstruct.create("div",  {class: "properties"}, contactInfoContainer);
  
              //Name
              this._createTextbox("name", data.fullName, "Name", contactInfoProperties, false, false);
  
              /*//Email
              this._createTextbox("email", "Email", contactInfoProperties, false);
  
              //Phone 1
              this._createTextbox("phoneOne", "Phone 1", contactInfoProperties, true);
  
              //Phone 2
              this._createTextbox("phoneTwo", "Phone 2", contactInfoProperties, true);
  
              //Fax
              this._createTextbox("fax", "Fax", contactInfoProperties, false);
  
              //Organization
              this._createTextbox("organization", "Organization", contactInfoProperties, false);
  
              //Department
              this._createTextbox("department", "Department/Unit", contactInfoProperties, false);
  
              //Role
              this._createTextbox("role", "Role/Job title", contactInfoProperties, false);*/
  
              //Website
              this._createTextbox("website", data.website, "Website", contactInfoProperties, false, false);
  
              //Address
              //this._createTextbox("address", "Address", contactInfoProperties, false);
  
              //TLP
              this._createTLP_DDL("tlp", "TLP", contactInfoProperties);
  
  
              //Create container for CATEGORIES
              var contactInfoCategories = domConstruct.create("div", { class: "categories" }, contactInfoContainer);
  
              //Categories heading
              var p=domConstruct.create("p", { class: "heading" }, contactInfoCategories);
              p.innerHTML = "Categories";
  
              //Alert, Warning &amp; Incident Response
              this._createCategory("alert", contactInfoCategories, "Alert, Warning &amp; Incident Response");
  
              //Threat
              this._createCategory("threat", contactInfoCategories, "Threat");
  
              //Vulnerability
              this._createCategory("vulnerability", contactInfoCategories, "Vulnerability");
  
              //Industry
              this._createCategory("industry", contactInfoCategories, "Industry");
  
              //Policy
              this._createCategory("policy", contactInfoCategories, "Policy");
  
              //R &amp; D
              this._createCategory("rd", contactInfoCategories, "R &amp; D");
  
              //Sharing
              this._createCategory("sharing", contactInfoCategories, "Sharing");
  
              //Crime
              this._createCategory("crime", contactInfoCategories, "Crime");
  
              //SCADA/Process Control
              this._createCategory("scada", contactInfoCategories, "SCADA/Process Control");
  
              //Assurance
              this._createCategory("assurance", contactInfoCategories, "Assurance");
  
              //Standards
              this._createCategory("standards", contactInfoCategories, "Standards");
  
              //Resilience
              this._createCategory("resilience", contactInfoCategories, "Resilience");
  
              //Exercises
              this._createCategory("exercises", contactInfoCategories, "Exercises");
  
              //Defence
              this._createCategory("defence", contactInfoCategories, "Defence");
  
              //Media handling
              this._createCategory("media", contactInfoCategories, "Media handling");
  
              //General PoC
              this._createCategory("poc", contactInfoCategories, "General PoC");
  
  
  
              //Add remove button
              var btnRemove = domConstruct.create("input", { type: "button", id: "btnRemove" + amountContacts, value: "Remove"/*,onclick:"_deleteContact(this)"*/ }, contactInfo);
              this.connect(btnRemove, "onclick", dojo.partial(this._deleteContact, btnRemove.id));
  
          },
  
          _createTextbox:function(id, textBoxValue, labelText, parent, checkbox, checkboxChecked)
          {
              var currentId = id+amountContacts;
  
              var textboxContainer = domConstruct.create("div",  {class:"form-item"}, parent);
  
              this._createLabel(currentId, textboxContainer, labelText);
  
              //Create textbox and attach update handler
              var textbox = domConstruct.create("input", { type: "text", id: currentId, name: currentId }, textboxContainer);
              if (textBoxValue)
                  textbox.value = textBoxValue;
  
              this.connect(textbox, "onchange", this._updateValue);
  
              if (checkbox) {
                  this._createCheckbox("inline", textboxContainer, currentId + "_24", "24/7?");
              }
          },
  
  
          _createTLP_DDL:function(id, labelText, parent)
          {
              var currentId = id+amountContacts;
  
              var ddlContainer = domConstruct.create("div", { class: "form-item" }, parent);
              this._createLabel(currentId, ddlContainer, labelText);
  
              var ddl = domConstruct.create("select", { name: currentId, id: currentId }, ddlContainer);
  
              //Add options
              var option1 = domConstruct.create("option", { val: "-1" }, ddl);
              option1.innerHTML = "None";
  
              var option1 = domConstruct.create("option", { val: "1" }, ddl);
              option1.innerHTML = "Yes";
  
              var option1 = domConstruct.create("option", { val: "0" }, ddl);
              option1.innerHTML = "No";
          },
  
          _createCategory:function(id, parent, checkboxText)
          {
              var currentId = id + amountContacts;
  
  
              var categoryContainer = domConstruct.create("div", { class: "form-item inline" }, parent);
              this._createCheckbox("", categoryContainer, currentId, checkboxText);
          },
  
          _createLabel:function(forId, container, labelText)
          {
              var label = domConstruct.create("label", { for: forId }, container);
              label.innerHTML = labelText;
          },
  
          _createCheckbox:function(labelClass, container, checkboxId, checkboxText){
              var labelCheckbox = domConstruct.create("label", { class: labelClass }, container);
  
              //Create checkbox and attach update handler
              var checkbox = domConstruct.create("input", { type: "checkbox", id: checkboxId, name: checkboxId }, labelCheckbox);
              this.connect(checkbox, "onchange", this._updateValue);
  
              var span = domConstruct.create("span", {}, labelCheckbox);
              span.innerHTML = checkboxText;
          },
  
          _deleteContact:function(targetBtnId)
          {
              var userInput = window.confirm("Are you sure you want to delete this contact?");
              if (userInput) {
                  dojo.destroy(contactContainerPrefixName+targetBtnId[targetBtnId.length-1]);
              }
          },
  
          _updateValue: function () {
              //TODO: Delete test data
              var contacts = [];
  
              //The amount of contacts can have changed after deletions, so the global variables might not hold the real value
              var actualAmountContacts = 0;
  
              for (var i = 1; i &lt;= amountContacts; i++) {
                  if (this._isValidContact(i)) {
  
                      var currentContact = new Object();
                      currentContact.fullName = this._getValueById("name" + i);
                      currentContact.website = this._getValueById("website" + i);
  
                      contacts[actualAmountContacts] = currentContact;
                      actualAmountContacts++;
                  }
              }
  
  
  
              this._set("value", contacts);
              this.onChange(contacts);
          },
  
          _getValueById: function (id) {
              var node = dojo.byId(id);
              var textValue = (node != null) ? node.value : "";
              return textValue;
  
          },
  
          _isValidContact:function(itemNumber){
              //If there's no name or telephone then it's not a valid contact
              return (this._getValueById("name" + itemNumber) != "" || this._getValueById("phoneOne" + itemNumber) != "" || this._getValueById("phoneTwo" + itemNumber) != "");
          },
      });
  });
  </code></pre>
  
  <p>UPDATE:
  After a lot of test I've realized it's not the domConstruct.create statement which causes the error, the problem is that the form element that has "id:cccp" and to which I want to attach the created elements is null at this point. It is defined in the templateString as you can see in the source code but it's still null in the postCreate method. So the question is now, what event gets triggered when the HTML in the templateString is loaded? </p>