title: append script containing html for jquery template
body: <p>Please bear with me as I try to explain this as it's somewhat complicated and I am totally new to JQuery and trying to get my head around it.</p>
  
  <p>My team and I are working on WebParts for a SharePoint project. The WebPart contains a user control (SearchControl), which has a link to open a dialog (using jquery ui) that contains another user control (SelectorControl).</p>
  
  <p>SelectorControl contains:</p>
  
  <ul>
  <li>a drop-down list (objTemplates) that is populated using JQuery Templates</li>
  <li>a table that is populated using another JQuery Template; and</li>
  <li>a readonly text input to display the currently selected item from the table</li>
  </ul>
  
  <p>SelectorControl code:</p>
  
  <pre><code>        &lt;div class="objSelector"&gt;
          &lt;script id="objSelectorTemplate" type="text/x-jquery-tmpl"&gt;
          &lt;div class="table"&gt;
              &lt;div class="row"&gt;
                 &lt;div class="labelInputGroup"&gt;
                      &lt;label for="objTemplates"&gt;Obj Template&lt;/label&gt;
                      &lt;select id="objTemplates"&gt;
                          {{each ObjectTemplates}}
                              &lt;option value="${ObjectTemplateId}"&gt;${Name}&lt;/option&gt;
                          {{/each}}
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;&lt;br&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div&gt;
                      &lt;table class="tableGrid"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Object Name&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody id="listPlaceholder"&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                      &lt;div id="pagerPlaceholder"&gt;&lt;/div&gt;
                  &lt;/div&gt;        
              &lt;/div&gt;     
              &lt;div id="templatePlaceholder"&gt;
              &lt;/div&gt;
              &lt;div&gt;&lt;br&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;input type="hidden" id="localSelectedObjectId" class="hidden" /&gt;
                  &lt;label for="localSelectedObject"&gt;Selected Object&lt;/label&gt;
                  &lt;input type="text" class="dealName" id="localSelectedObject" readonly="readonly" placeholder="No object selected"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/script&gt;    
          &lt;script id="listTemplate" type="text/x-jquery-tmpl"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;a class="objectItem" id="${Id}" href="#"&gt;${Name}&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
         &lt;/script&gt;    
         &lt;div id="pagerControl"&gt;
            &lt;uc1:PagerControl ID="PagerControl1" runat="server" /&gt;
         &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>The drop-down list is populated just before the dialog is created using data retrieved from a WCF service that's then bound to the first template.</p>
  
  <p>A 'change' event is bound to the drop-down list using live to populate the table (second template) by calling a WCF Service and passing through the currently selected item in the drop-down list.</p>
  
  <p>When the change event is triggered on the drop-down list, LoadObjects is called:</p>
  
  <pre><code>            function LoadObjects(event) {
  
              var dialogDom = event.data.DialogDom;
              var searchObj = GetSearchFilters(); // removed irrelevant code here
  
              var listTemplate = searchDom.find('#listTemplate');
                      var templatePlaceholder = dialogDom.find('#templatePlaceholder');
                      templatePlaceholder.empty();
                      templatePlaceholder.append(listTemplate);
  
                      var pagerControl = searchDom.find('#pagerControl');
                      var pagerPlaceholder = dialogDom.find('#pagerPlaceholder');
                      pagerPlaceholder.append(pagerControl);
  
                      var list = GenerateList(
                          dialogDom,
                          $('&lt;div&gt;&lt;/div&gt;'),
                          searchObj,
                          Connection('MyUiService', 'GetObjects'));
          }
  </code></pre>
  
  <p>The GenerateList() method creates a JQuery object with various methods including ones that get the objects data from a WCF service and bind it to the template (listTemplate)</p>
  
  <p>The PagerControl code also contains a template, which is populated at the same time as listTemplate.</p>
  
  <p>The code for listTemplate and the pager had to be put outside of the objectSelectorTemplate script and then copied in later to prevent it from being removed when the page is parsed for the populating of the drop-down list. </p>
  
  <p>All of the above works fine the first time the dialog is opened and an item is selected from the drop-down list. It is possible to change pages within the data in the table without any problem but as soon as the selected item in the drop-down list changes, the table data is no longer loaded. If I step through the code, I can see that append() (in the LoadObjects method) removes the listTemplate script when it inserts it into listPlaceholder, which means that when the dialog goes to load the table data again, the script is no longer there. To get around this, I tried appending a clone instead:</p>
  
  <pre><code>    templatePlaceholder.append(listTemplate.clone());
  </code></pre>
  
  <p>This successfully prevented the listTemplate script from being removed, however, the cloned copy contained the script tags but not its contents so the table data still didn't get loaded. I searched through SO and found John Resig's response to <a href="https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object">this question</a>:</p>
  
  <p>So I changed the above code to:</p>
  
  <pre><code>    var listTemplateCopy = jQuery.extend({}, listTemplate);
      templatePlaceholder.append(listTemplateCopy);
  </code></pre>
  
  <p>This successfully copied the script tag and its contents to listTemplateCopy but append() removes listTemplate as well as listTemplateCopy. At first I assumed this was because extend is intended for merging two (or more) objects into a single object but from John's response and from what I've read in the documentation, it sounded like extend is what you're supposed to use to create a copy of a jquery object.</p>
  
  <p>Can anyone explain to me what exactly is going on and recommend a solution to the above? </p>
  
  <p>A couple of ideas I had was to:</p>
  
  <ul>
  <li>shift the script tags to only surround the template code. I could then have the second template code in place rather than needing to append it. Binding would be done by binding to the drop-down list template then to the table</li>
  <li>use a different manner to populate the drop-down list rather than a template to simplify the page and remove the "necessity" to have scripts being appended, as there wouldn't be a script tag surrounding the whole lot</li>
  </ul>
  
  <p>I would like to gain an understanding of exactly what the code is currently doing though before pursuing either of those approaches.</p>