django, ajax: how to live update a bunch of data effectively

Question

I am creating a project that simulates Stock Exchange Market. I am exposing stock data to the user on a big html <table> where each <tr> row has two <td> cells. One of them is the symbol of the company (i.e. AAPL) and the other one is the current market value (couldn't be simpler).

What I do now is that I use a javascript function like this:

<script type="text/javascript">

$(function(){
    setInterval(loadTable, 10000)
});

function loadTable(){
  $("#se_table").load("/load/table/?ajax&user={{user.username}}");
}

</script>

Is this the best way? Should I load the whole table when only one value is changed?

Answer 1

Firstly, this will probably result in a bad user experience if someone is busy doing something with the table, such as highlighting text, when it all suddenly re-renders. If you must reload all data, at least only update the rows that changed. You can achieve this with javascript built-in table manipulations, or any number of jQuery plugins.

Secondly, if it is computationally plausible, it would be much more efficient in terms of data transfer and user experience if you could calculate which rows changed, and only send those rows. Assign a globally unique id to each row in your table, so you can easily update only that row with jQuery. With this technique, it's also easy to add some visual cue that the specific row has updated, such as a slight colour change, which is often nice (where applicable).

My favorite way of doing this sort of thing (without Comet) is the following:

1. Poll every 10 seconds to a page which only returns whether the data has changed. Checking this is much more efficient than sending all the data all the time. You only need to store a datetime field containing when last a value has changed, and check against the last datetime the browser has received (send that with the request).
2. If it has changed, use jQuery the trigger method send another ajax request, this time expecting a list of rows that have changed since that datetime.
3. Update the affected rows.

Update

Based on your comments, I'll just add a few extra notes.

1. For the polling you would probably use the jQuery .get() method. You said you're using Django, so I suggest using json, which means in your view you will return JSON data. Here's a simple tutorial to get you started.
2. In the callback function for success, check whether there is new data with a boolean returned from your Django view, and if there is, call a function that makes a new ajax call to retrieve the relevant data (again, a JSON object).
3. With this JSON object, go through each item that has to be updated, and use the jquery text function, or one of the jQuery table plugins, to update the rows.

This is quite a mouthful and a lot of googling if you're new to this, but it's a good, clean way of doing it.

Answer 2

Make extensive use of of data attributes. During the initial GET page request, have your columns that contain values look something like:

<td data-for-symbol="GOOG">+256.00</td>

Have /load/table/?ajax&user={{user.username}} return a JSON response with objects that contain updates since the last time the user fetched the table, then apply them individually:

$('td[data-for-symbol=' + obj.symbol + ']').text(obj.value);

Can't go cleaner than that.