Implementing A Click To Edit UI

This example offers an inline click-to-edit UI for a contact. When you click the button below the current UI will be replaced with an editing UI, without a full browser refresh. You can then update the user information or cancel the edit.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

• The 'Click To Edit' button uses ic-get-from to issue a GET to /contact/1/edit, and targets the div surrounding the entire Contact UI using ic-target
• The server returns a form that replaces the content of the div. The form uses the ic-put-to to issue a PUT to /contact/1 and targets the same enclosing div.
• The 'Cancel' button uses ic-get-from to issue a GET to /contact/1 and targets the same div. The server-side handler at /contact/1 should use the ic-request or ic-target parameter to differentiate between a full window request and this partial request.

Demo