4

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?

Tom Tu
  • 9,573
  • 35
  • 37
xpanta
  • 8,124
  • 15
  • 60
  • 104

5 Answers5

10

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.

Herman Schaaf
  • 46,821
  • 21
  • 100
  • 139
  • Thank you very much. Data from the table will be fetched from a database. Each with its own timestamp, so I will probably use a request parameter which holds the timestamp user loaded the page and then I will just compare those timestamps. However my problem is this sentence "Poll every 10 seconds to a page which only returns whethere data has changed". You see, I only know how to use .load() with jQuery to change contents of a div element for example. I think I will need to read more on this.. – xpanta Feb 02 '11 at 14:03
  • Perfect answer! Any place where there's a more practical guide on how to do this? – Miguel Stevens Sep 01 '14 at 19:23
5

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.

Filip Dupanović
  • 32,650
  • 13
  • 84
  • 114
  • Thanks. JSON is not part of my knowledge. What you say seems very very interesting. I will read more about it. – xpanta Feb 02 '11 at 13:53
  • Any idea on how to check if there's new values in an array? Do you check it server or client side? Thanks – Miguel Stevens Sep 01 '14 at 19:22
1

you might consider using websockets What browsers support HTML5 WebSocket API?

Community
  • 1
  • 1
Xavier Barbosa
  • 3,919
  • 1
  • 20
  • 18
0

How will the web page know if only one value has changed? That would involve getting all the data anyway and then comparing the new data with the current data, and then setting the cell contents. By the time you've done that, maybe it would have been quicker to load the whole table in.

Does the table load cause any obvious problems, like page flicker as the browser reformats? I'd stick with the .load until it becomes a problem. But there's more...

Have you seen the wide range of jQuery plugin table enhancements? All sorts of magic wrapped up in jQuery goodness for sorting, filtering, fetching data from sources, and so on. Its always easier to learn how to use these and start your project with something like that rather than doing it by hand and then converting it once you realise you'd like all this functionality. Google for "jquery table" and maybe "data" or "ajax" and you'll hit something.

Spacedman
  • 92,590
  • 12
  • 140
  • 224
0

when the value changes in the raise an event .trigger() and write a handler like 

$("td").live("yourCustomTrigger",function(){

var $td=$(this);
$("$td").val("updated value")
//here update your td only

})

but still you have to figure out some questions like how will it be determined that the value in td has been changed?? as pointed out by Spacedman

here are some useful plugins

Rafay
  • 30,950
  • 5
  • 68
  • 101