Table columns not sorted by Tablekit after AJAX call is added

Question

albertkao 12 Junior Poster in Training

14 Years Ago

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>

javascript

2 Contributors
1 Reply
359 Views
8 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-03-04T23:43:53+00:00

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.

On each AJAX update, replace just the contents (table rows) within the sortable table.
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