--- layout: default nav: tutorial ---

# 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

First Name: Joe
Last Name: Smith
Email: joesmith@example.com