ckirkendall / enfocus

DOM manipulation and templating library for ClojureScript inspired by Enlive.
http://ckirkendall.github.com/enfocus-site/
370 stars 41 forks source link

Hiccup input control - checked and disabled not working #110

Open rqcashman opened 6 years ago

rqcashman commented 6 years ago

I used hiccup to generate a checkbox. I want to check it and/or disable it under certain conditions. The HTML should emit with the word checked or disabled but is putting out checked="true" or disable="false". The browser sees the work checked and disabled and always checks and disables the control regardless of its value.

This is the function.


(defn availability-row
  "generate an availability row"
  [row active?]
  (let [sent_flag (if (= (:date_sent row) nil) "N", "Y")
        player_response (case (:response row)
                          0 "N"
                          1 "Y"
                          2 "?"
                          "NA")
        avail (case (:available row)
                1 "Y"
                "N")
        long-status (case (:status row)
                      "A" "Active"
                      "S" "Sub"
                      "I" "Inactive")
        row-class (if (= avail "Y") "player-avail" (if (= (:status row) "I") "player-inactive" ""))]
    ;we want the inactive players at the bottom
    ;so we call this twice with the same result set

    (if (or
          (and (not= (:status row) "I") (= active? true))
          (and (= (:status row) "I") (= active? false)))
      (let [box-checked (if (= avail "Y") true false)
            box-disabled (if (= (:status row) "I") true false)]
      (ef/html
        [:tr {:class row-class :id (:id row)}
         [:td {:nowrap true} (:last_name row) ", " (:first_name row)]
         [:td {:align "center"}
          [:input {:type "checkbox" :disabled box-disabled :checked box-checked :name (str "pl-av-" (:id row)) :onclick "swapClass(this)"}]]
         [:td {:align "center"} player_response]
         [:td {:align "center"} sent_flag]
         [:td (if (= (:response_date row) nil) "" (:response_date row))]
         [:td {:align "center"} long-status]
         ])))))
      ;(str "<tr class='" row-class "' id='" (:id row) "' onclick=''>"
      ;     "<td nowrap>" (:last_name row) ", " (:first_name row) "</td>"
      ;     "<td align='center'>
      ;         <input type='checkbox' name='pl-av-" (:id row) "'"
      ;     (if (= avail "Y") " checked")
      ;     (if (= (:status row) "I") " disabled")
      ;     " onclick='swapClass(this);'</input>"
      ;     "</td>"
      ;     "<td align='center'>" player_response "</td>"
      ;     "<td align='center'>" sent_flag "</td>"
      ;     "<td>" (if (= (:response_date row) nil) "" (:response_date row)) "</td>"
      ;     "<td align='center'>" long-status "</td>"
      ;     "</tr>"))))
rqcashman commented 6 years ago

Here is an image of the page when it is working. enfocus

rqcashman commented 6 years ago

I looked at how Hiccup does this. It looks like for a value with a true it renders the attribute name and for a value of false it renders nothing so {:disabled true} comes out as disabled as it should. Here is the code:

(defn- render-attribute [[name value]]
  (cond
    (true? value)
      (if (xml-mode?)
        (xml-attribute name name)
        (str " " (as-str name)))
    (not value)
      ""
    :else
      (xml-attribute name value)))

I think Enfocus just flattens the map so you get something like disabled="true" instead of just disabled.