Question

I’m building this application using PHP, MySQL and jQuery. Essentially it’s a checklist management application.

I have these checklists (laid out as tables, much like a spreadsheet) that can be edited asynchronously; every time there’s a change, it’s reported through an AJAX call to PHP which updates MySQL.

The tricky part is that it’s possible for other people to be editing the same checklist at the same time, the content of the checklist is updated if jQuery notices a change between the JSON object (it fires of an HTTP request periodically to ping the DB) and the content in the HTML table row.

This works fine for a limited number of items in my checklist, but when when my checklist numbers a considerable amount of rows, it kinda craps itself and lags out. I know that the inefficiency lays in the fact that every time an HTTP request is made for the most recent items in the checklist, I loop through every row in the HTML table and compare the contents of the row with the corresponding checklist item in the JSON object to see if there was a change.

I was wondering if there’s a more efficient way to detect changes between my JSON object and what I have on the screen without looping through the DOM?

Essentially, how do I keep a large dataset in sync asychronously with minimal DOM manipulation?

Thanks a lot!

Answer 1

Instead of looping through the DOM, update a local data structure on user input. Then compare that local data structure to the new data structure coming back from the webservice. It should be easy to then update just the nodes in the DOM that need updating by ID.