0

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>
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Airshow
0

I don't know how tablekit's sort function works but I can make a shrewd guess that it is initialised with the id/class of the relevant table(s), and thereafter uses Javascript reference(s) to the corresponding DOM element(s) (probably stored in a closure).

Your first AJAX blitz the original DOM elements (everything inside "topmenu") replacing them with new content as per the AJAX return.

If I'm right about tablekit, then the consequesnce of the AJAX updates is to dissociate the sort functionality from the (now replaced) table on which it is supposed to act.

Again if I'm right, then two possible solutions come to mind.

  1. On each AJAX update, replace just the contents (table rows) within the sortable table.
  2. After each AJAX update, re-initialise the tablekit sort.

Method 1 is prefereable since method 2 is more likely to be memory hungry, which is an issue in long lifed web pages with regualr AJAX updates.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.