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.

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  4. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  5. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  6. <script>
  7. $( document ).on( "pageinit", function() {
  8.     $( document ).one( "click", "#add_and_refresh", function () {
  9. var newCol = '<th data-priority="5">Reviews</th>';
  10. $( "table#table-column-toggle thead tr th" ).first().html('New Name');
  11. $( "table#table-column-toggle thead tr" )
  12.             // Append the new col to the body
  13.             .append( newCol );
  14.         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>";
  15.         $( "table#table-column-toggle tbody" )
  16.             // Append the new rows to the body
  17. .html('')
  18.             .append( newRows )
  19.             // Call the refresh method
  20.             .closest( "table#table-column-toggle" )
  21.             .table( "refresh" )
  22.             // Trigger if the new injected markup contain links or buttons that need to be enhanced
  23.             .trigger( "create" );
  24.         // We disable the button to make clear that in this demo we have only one set of rows to inject
  25.         $( "#add_and_refresh" ).button( "disable" );
  26.     });
  27. });
  28. </script>
  29. </head>
  30. <body>


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

  47.     </tr>
  48.     <tr>
  49.       <th>2</th>
  50.       <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
  51.       <td>1942</td>
  52.       <td>97%</td>

  53.     </tr>
  54.     
  55.   </tbody>
  56. </table>
  57. <input type="button" id="add_and_refresh" data-role="button" data-icon="refresh" data-theme="c" data-inline="true" value="Add rows & refresh">

  58. </body>
  59. </html>