Question

I have a instant updating comment system(This means that when anyone anywhere post, it updates instead of having to reload the page.) that uses setInterval to execute AJAX and send it to the server and reload the comments. So, the comments keep blinking. Anyway I need a way to only update the comments when it sees that a phpMyadmin SQL row has been added.

My site: http://learntc.net/index.php

Thanks for any help I get. Just comment if you need more information on something.

Answer 1

When you load the comments, each record will have an ID. You will know the highest record ID that is loaded on the page.

When your JS timer makes the ajax call, have it send that highest loaded ID back to server. Your query can then specify only to load records where the ID is higher than the supplied value. You will then only get records that are newer than the ones on the page.

Then, when this data is sent back to your page, rather than replacing the whole comment block, simply append the new data onto the end of the existing comment block.

This will prevent the existing comments from having to be reloaded. It will prevent the flickering, and will also make your SQL queries more efficient, and save you bandwidth from sending the same data over and over again.

Hope that’s enough of an explanation to get you started.

Finally, one other thing. Off topic, but I should mention it: I would recommend avoiding the Javascript setInterval() function. Use setTimer() instead, and re-trigger it on each iteration.

The reason for this is that setInterval() can get itself into problems if any JS code causes a delay. For example, if you have an alert() that the user leaves on screen for a length of time, the setInterval() calls that would have happened while the alert() was blocking the system will all get stacked up and will all be fired in quick succession one after the other as soon as JS gets control back. This can be a serious problem. If you use setTimer() instead, you will avoid this issue.

For a better explaination, read here: http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts