I have a bunch of UI elements, which for simplicity’s sake we can consider them to be li elements.
A visitor to a web page can insert, delete or reorder these li elements and every time the user does it, the updated order should be persisted. A linked list would be the best solution in this case, but for one issue.
Let us suppose two users A and B have the web page containing the list open. The list looks like this 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8.
User A reorders it to 1 -> 4 -> 3 -> 2 -> 5 -> 6 -> 7 -> 8. This change is successfully persisted by AJAX calls updating the references for 1, 4, 3, 2 and 5.
In the 2-3 seconds that it takes for this call to travel to the backend, persist and update on User B’s screen – User B updates the list that appears on his web page to 5 -> 2 -> 3 -> 4 -> 1 -> 6 -> 7 -> 8. The wrong AJAX calls are generated and they ultimately mess up the ordering.
Would love some suggestions on how best to solve this issue.
Have a UUID that is updated whenever the order changes. Send the UUID to the client when they want to reorder, and verify that the UUID has not changed on submit. If it has, either reject the reorder or notify the user and allow them to take the appropriate action.