title: jQueryMobile: refresh after dynamically adding rows to a table with column toggle
body: <p>I have a problem regarding the jQueryMobile "column toggle table mode". </p>
  
  <p>After <strong>adding rows dynamically via Javascript</strong>, the toggling gets wrong. Not that it doesn't work at all, but it somehow gets confused, swaps columns or similar strange behaviour.  </p>
  
  <p>I am fully aware that there is a <strong>"refresh"-method</strong> exactly for this scenario, but it doesn't work in my example. I also looked at <a href="https://stackoverflow.com/questions/9334633/how-to-refresh-jquery-table-after-a-row-is-added-dynamically">How to refresh JQuery mobile table after a row is added dynamically</a>, but it doesn't really apply to my problem. The only other similar question I found was old and related to version &lt;=1.3.0 of JQM, when no refresh-method existed.</p>
  
  <p>I have this table</p>
  
  <pre><code>&lt;table data-role="table" id="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a"&gt;
              &lt;thead&gt;
                  &lt;tr class="ui-bar-d"&gt;
                      &lt;th data-priority="1"&gt;#&lt;/th&gt;
                      &lt;th data-priority="1"&gt;Data Code&lt;/th&gt;
                      &lt;th&gt;Data Name&lt;/th&gt;
                      &lt;th&gt;Value&lt;/th&gt;
                      &lt;th data-priority="1"&gt;Minimum&lt;/th&gt;
                      &lt;th data-priority="1"&gt;Maximum&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              ...
              &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this Javascript code that updates it:</p>
  
  <pre><code>for (var i = 0; i &lt; rows.length; i++) {
      html = html + "&lt;tr&gt;\n";
      for (var j = 0; j &lt; rows[i].length; j++) {
          html = html + "&lt;td&gt;" + rows[i][j] + "&lt;/td&gt;\n";
      }
      html = html + "&lt;/tr&gt;\n\n";
  }
  
  $("#table &gt; tbody").append(html);
  $("#table").table("refresh");
  </code></pre>
  
  <p>.  </p>
  
  <hr>
  
  <p><strong>Please see this JSFiddle for a minimized -but working- demo of my problem: <a href="http://jsfiddle.net/kkppd/" rel="nofollow noreferrer">http://jsfiddle.net/kkppd/</a></strong></p>
  
  <hr>
  
  <p>If you try the JSFiddle, please compare it to my findings:</p>
  
  <ol>
  <li>"Run" the code. The webpage should show up with some sample data which is hardcoded in the HTML. The columns are toggling correctly.  </li>
  <li>Click the button that triggers an update similar to the way it would be updated automatically in my original application. This empties the table and re-adds the same content. Afterwards I call the refresh-method of JQM.  </li>
  <li>The table seems as it was before - but have a try on the "toggle columns" button:
  "Maximum" toggles "Minimum", "Minimum" toggles "#", "#" toggles "Data Code", etc.   </li>
  </ol>
  
  <p>What did I do wrong?</p>