Table columns not sorted by Tablekit after AJAX call is added

JavaScript
1

I use the Tablekit library and Prototype javascript framework on firefox, chrome & IE8.
The columns in this table can be sorted by the Tablekit library.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/tablekit.js"></script>

<body> 
  <div id="mainmenu"> 
   ... 
  </div> 
  <div id="content"> 

  <table class="sortable resizable">
  <thead><tr>
    <th class="sortfirstdesc">ID</th>
    <th>Date</th>
    <th>Time</th>
  </tr></thead>
  </table>
  </div>
</body>

However, after adding the periodic refresh by AJAX (eventually I want to refresh only the web page when there is new data available) and <div>, then the columns in this table cannot be sorted by the Tablekit library.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/tablekit.js"></script>
<body onload="new Ajax.PeriodicalUpdater('topmenu', 'activity.htm', {method: 'get', frequency: 10});"> 
<div id="topmenu"> 
... 
  <div id="mainmenu"> 
   ... 
  </div> 
  <div id="content"> 

  <table class="sortable resizable">
  <thead><tr>
    <th class="sortfirstdesc">ID</th>
    <th>Date</th>
    <th>Time</th>
  </tr></thead>
  </table>
  </div>
</body>
</div>