Column toggle refresh issue in 1.3.1

Column toggle refresh issue in 1.3.1

Neither name of nor number of columns are updated upon refresh of the table.

  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  5. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  6. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  7. <script>
  8. $( document ).on( "pageinit", function() {
  9.     $( document ).one( "click", "#add_and_refresh", function () {
  11. var newCol = '<th data-priority="5">Reviews</th>';
  13. $( "table#table-column-toggle thead tr th" ).first().html('New Name');
  15. $( "table#table-column-toggle thead tr" )
  16.             // Append the new col to the body
  17.             .append( newCol );
  19.         var newRows = "<tr><th>6</th><td><a href=\"http://en.wikipedia.org/wiki/Dr._Strangelove\" data-rel=\"external\">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td><td>1964</td><td>92%</td><td>74</td></tr><tr><th>7</th><td><a href=\"http://en.wikipedia.org/wiki/The_Graduate\" data-rel=\"external\">The Graduate</a></td><td>1967</td><td>91%</td><td>122</td></tr><tr><th>8</th><td><a href=\"http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)\" data-rel=\"external\">The Wizard of Oz</a></td><td>1939</td><td>90%</td><td>72</td></tr><tr><th>9</th><td><a href=\"http://en.wikipedia.org/wiki/Singin%27_in_the_Rain' data-rel=\"external\">Singin\" in the Rain</a></td><td>1952</td><td>89%</td><td>85</td></tr><tr><th>10</th><td class=\"title\"><a href=\"http://en.wikipedia.org/wiki/Inception\" data-rel=\"external\">Inception</a></td><td>2010</td><td>84%</td><td>78</td></tr>";
  20.         $( "table#table-column-toggle tbody" )
  21.             // Append the new rows to the body
  22. .html('')
  23.             .append( newRows )
  24.             // Call the refresh method
  25.             .closest( "table#table-column-toggle" )
  26.             .table( "refresh" )
  27.             // Trigger if the new injected markup contain links or buttons that need to be enhanced
  28.             .trigger( "create" );
  29.         // We disable the button to make clear that in this demo we have only one set of rows to inject
  30.         $( "#add_and_refresh" ).button( "disable" );
  31.     });
  32. });
  33. </script>
  34. </head>
  35. <body>


  38. <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
  39.   <thead>
  40.     <tr>
  41.       <th data-priority="2">Rank</th>
  42.       <th>Movie Title</th>
  43.       <th data-priority="3">Year</th>
  44.       <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
  45.       
  46.     </tr>
  47.   </thead>
  48.   <tbody>
  49.     <tr>
  50.       <th>1</th>
  51.       <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
  52.       <td>1941</td>
  53.       <td>100%</td>

  55.     </tr>
  56.     <tr>
  57.       <th>2</th>
  58.       <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
  59.       <td>1942</td>
  60.       <td>97%</td>

  62.     </tr>
  63.     
  64.   </tbody>
  65. </table>
  66. <input type="button" id="add_and_refresh" data-role="button" data-icon="refresh" data-theme="c" data-inline="true" value="Add rows & refresh">

  68. </body>
  69. </html>