title: JQuery tablesorter using ajax and dynamic thead and tbody sections
body: <p>I am attempting to add in some table sorting using the jquery tablesorter plugin to a Rally app using dojo, struggling with how to hook up the update callback for the tablesorter.</p>
  
  <p>I have html that looks like this (thead and tbody are separated as they are being dynamically generated i.e. number of columns is not known in advance):</p>
  
  <pre><code>&lt;table id='myTable' class='tablesorter'&gt;
      &lt;thead id='sort-head'&gt;&lt;/thead&gt;
      &lt;tbody id='sort-body'&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>tablesorter init is here</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function onLoad() {
          var appCustom = new ReleaseScopeChange();
          appCustom.display(dojo.body());
      }
      rally.addOnLoad(onLoad);
      $(document).ready(function(){$("#myTable").tablesorter();});      
  &lt;/script&gt;
  </code></pre>
  
  <p>Code updating the thead/tbody</p>
  
  <pre><code>dojo.byId("sort-head").innerHTML = headresults; 
  dojo.byId("sort-body").innerHTML = bodyresults; 
  $('#myTable').trigger("update");            
  </code></pre>
  
  <p>Now, the sorting never actually gets set up at all. If I add a static table I can get the sorting working perfectly, so I am assuming its related to timing between the ajax request and the update trigger.</p>
  
  <p>I have looked through a lot of other answers on this and I'm really not sure what is missing.</p>