Question

I’m using inline-edit to update text in the database with AJAX. This is basically the process, pretty usual stuff:

• text is not editable
• I click the text, it becomes editable
• I type the new text
• then click to send the updated text to the database
• then return the text to non-editable format

My question is when should I update the interface with the new data? Should I update it immediately before the ajax call, or should I wait for the update response to return from the database?

My concern:

• If I don’t update the interface immediately and wait to get the response from the database, then I’ve lost the asynchronous benefit that comes with ajax.
• But if I update it immediately, then if the database response has an error, I somehow have to track the change I already made, and reverse it, which is a lot more work.

So how is this sort of thing usually done?

Answer 1

I think it is completely reasonable to wait for the response and update as a result of a callback. Doing so does not detract from the async approach. It is still fully async because you are not blocking the entire page or reloading it completely.

Plenty of times in apps, especially in mobile ones where the bandwidth might be limited, I will see a spinner indicating that the field is submitting. This does not hold up any other part of the app. Even stackoverflow does this when I use the mobile view. Rely on the callbacks in order to stay async and still be synced to database return values.