Django, ajax: how to efficiently update a bunch of data

Question

I am creating a project that mimics the stock market. I place the stock data to the user on a large html <table> , where each row of <tr> has two <td> cells. One of them is the symbol of the company (i.e. AAPL), and the other is the current market value (could not be simpler).

Now I use the javascript function, for example:

 <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 changes?

Answer 1

Firstly, this is likely to lead to a bad user experience if someone is busy doing something with the table, for example, highlighting text when all of this is suddenly re-displayed. If you must reload all the data, at least only update the changed rows. This can be done using the built-in manipulation of javascript tables or any number of jQuery plugins.

Secondly, if this is possible from a computational point of view, it would be much more efficient in terms of data transfer and user experience if you could calculate which lines changed and only send these lines. Assign a globally unique id for each row in your table so that you can easily update only that row with jQuery. Using this technology, it’s also easy to add a visual cue that a particular line has updated, for example, a slight color change, which is often pleasant (if applicable).

My favorite way to do this (without a comet):

• Polling every 10 seconds on a page that only returns if the data has changed. Checking this out is much more efficient than sending all the data all the time. You only need to save the datetime field containing when the last value changed, and check it for the last time that the browser received (send it with the request).
• If it has changed, use jQuery, the trigger method sends another ajax request, this time waiting for a list of strings that have changed since that datetime.
• Refresh affected rows.

Update

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

• For polling, you probably use the jQuery method . get () . You said you were using Django, so I suggest using json, which means, in your opinion, you will return JSON data. Here's a simple tutorial to get you started.
• In the callback function, for success, check if there is new data with a logical return from your Django view, and if so, call a function that forces the new ajax call to retrieve the corresponding data (again, a JSON object).
• Using this JSON object, look at each item you want to update, and use the jquery text function or one of the jQuery table plugins to update the rows.

This is quite a sip and a lot of adventure if you are new to this, but it is a good, clean way to do it.

Answer 2

Use the data attributes carefully. During the initial request of the GET page, your columns containing values ​​look something like this:

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

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

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

It is impossible to make cleaner than this.

Answer 3

you can use websockets Which browsers support the HTML5 WebSocket API?

Answer 4

How does a webpage recognize if only one value has changed? This will require getting all the data anyway, and then comparing the new data with the current data, and then setting the contents of the cell. By the time you did this, it might be faster to load the entire table.

Does the table load affect any obvious problems, such as page flickering, like reformatting the browser? I will stick with .load until this becomes a problem. But there is more ...

Have you seen a wide range of jQuery plugin table enhancements? All kinds of magic wrapped in jQuery help sort, filter, retrieve data from sources, etc. It is always easier to learn how to use them and start your project with something like that, rather than doing it manually, and then transform it as soon as you realize that you need all this functionality. Google for "jquery table" and possibly "data" or "ajax" and you will hit something.

Answer 5

when the value changes in the boost 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 need to find out some questions, how to determine if the value in td will be changed? as indicated by spacedman

here are some useful plugins