Hi everyone! What I'd like to build is a page which displays a list of people. Next to each person is an edit button. Clicking the edit button will replace the person's information with an edit form where the user can change information about the person. The edit form has a save and cancel button. There is also a button at the top of the list which will pop up a new person form.
I'm designing an approach for tackling this problem: 1) I'm thinking of having two divs for each person, one for show, one for edit. This way the edit button will just hide the "show div" and show the "edit div". 2) Clicking the Save button will post the form info to the server in an AJAX call. The server will return a string in the following format: "[result];[html]", where [result] is either a 1 or 0, depending on whether the edit was successful or not, and the [html] is either a replacement show and edit div or a string with the error message of the failure. 3) Clicking Cancel will hide the "edit div" and and show the "show div". Here are my questions: 1) How can I remember the original values of the edit box if the user hits cancel. I'd rather not hit the server again as this will cause lag. 2) If the user is editing one person and then hits edit on a different person, I'd like to cancel the original edit. What is a good way to do this? 3) Are there any patterns or pre-built libraries to do this? Thanks!