simpleui tutorial examples docs source

Click To Edit

The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.

(defcomponent ^:endpoint form-edit [req first-name last-name email]
  [:form {:id id :hx-put "form-ro" :hx-target "this"}
   [:div
    [:label.mr "First Name"]
    (text "first-name" first-name)]
   [:div.form-group
    [:label.mr "Last Name"]
    (text "last-name" last-name)]
   [:div.form-group
    [:label.mr "Email Address"]
    (emaili "email" email)]
   [:button.btn.margin "Save"]
   [:button.btn.margin {:hx-get "form-ro"} "Cancel"]])

(defcomponent ^:endpoint form-ro [req first-name last-name email]
  ;; make sure form-edit is included in endpoints
  form-edit
  [:form {:id id :hx-target "this"}
    (hidden "first-name" first-name)
    [:div [:label "First Name"] ": " first-name]
    (hidden "last-name" last-name)
    [:div [:label "Last Name"] ": " last-name]
    (hidden "email" email)
    [:div [:label "Email"] ": " email]
    [:button.btn.margin
     {:hx-put "form-edit"}
      "Click To Edit"]])

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      (form-ro req "Joe" "Blow" "joe@blow.com"))))
: Joe
: Blow
: joe@blow.com