Pythoneer

Another one of those standard AJAX components is the edit in place method.
Don’t you agree, that editing data used to be really painful? It was always this looong story: clicking the edit button behind the actual data, showing a form that allows us to edit all the fields, submitting the form, getting back the validation message(s), finding the wrong field, edit again, submitting again … and so on.

The solution
Now that we have suffered enough we have also found an easier and much more intuitive way to do those kind of things. Let the user edit the data in place, just there where they are shown. This does of course have other traps, like: how does the user know what is editable, roll the mouse over every item to check? I think that the data that are editable should be obvious by the context. If the user is on one page of his address book, then it should be obvious (by design and context) that the address book data are editable. Additionally the web designer can also mark the elements that are editable. For example showing a border around them, using another color for those elements (we are used to different colors from hovered links) or by slightly animating the editable text.

To make a long story short, here is the example. Just feel free download and use it.

PS: I couldn’t yet figure out how to embed it here in wordpress, someone might help me so I can make wordpress allow me to copy+paste the code in here and leave it untouched. Not even en iframe with a src attribute would work (src becomes xsrc). I guess I gotta invest a bit more in finding that out :-).