I have a table (which represents a queue of items) whose rows can be reordered using the jQuery sortable plugin. A user can reorder their queue and the updated order saves to the server fine.
The challenge I face is that the server periodically pulls an item off the top of queue, process it, then move it to the bottom of the queue. When this happens, the order that the user sees on the browser is outdated and when they try to reorder, the indexes get all messed up.
I’ve come up with a couple solutions to solve this problem, but I’m not quite sure what interaction would make sense from a usability perspective. I’ve considered detecting the drag event on the UI and checking for updates on the server first, but if I refresh the page, then the dragging that the user was in the middle of would be interrupted.
I know when the server will update the queue, so I considered polling for this information, then locking down the dragging functionality a few seconds before the update occurs, then updating the order and unlocking the drag functionality.
I’m curious if anyone has solved a similar issue before. Any ideas or guidance would be greatly appreciated.
The usual approach to this problem is to periodically (in order of about 10 seconds maybe) refresh the page partially using Ajax. If it happens that the client state is outdated, you should inform the user and recover the client state to be synchronized with the server’s. The recovery can be achieved in multiple ways: The easiest would be to just refuse the client’s changes and update with the server’s state. The harder would be to try to merge the client state with the server’s, which is way more usable.