event handling in enfocus (clojurescript) not working

Question

I am using enfocus for dom manipulation in ClojuseScript.

I have an event handler:

(ns numeros-linguas.script
  (:require [enfocus.core :as ef]
            [enfocus.events :as ev])
  (:require-macros [enfocus.macros :as em]))

(defn aviso-seleciona []
  (ef/at "select" (ev/listen :change
                             (fn [evt]
                               (let [lingua-id (ef/from [:select] (ef/get-prop :value))
                                     lingua-selector (str "#" lingua-id)
                                     cores (array "azul" "vermelho" "laranja" "verde")
                                     linguas-visiveis (when-let [r (ef/from [:#resultado :> :div.visivel] (ef/get-attr :id))]
                                                        (-> r
                                                            list
                                                            flatten))]
                                 (ef/at "#resultado" (ef/append (ef/from lingua-selector identity)))
                                 (ef/at lingua-selector (ef/remove-class "invisivel"))
                                 (ef/at lingua-selector (ef/add-class "visivel"))
                                 (map #(do
                                         (ef/at (str "#" %)
                                                (ef/add-class %2))
                                         (map (fn [cor]
                                                (ef/at (str "#" %)
                                                       (ef/remove-class cor)))
                                              (remove #{%2} cores)))
                                      linguas-visiveis cores))))))

(set! (.-onload js/window)
  aviso-seleciona)

The tricky part is in the map. I want to remove some css classes from some div elements and add some others at these elements. But it is not working. All the other elements in the form are working except this one. But if I copy and paste the form to a repl connected to that page and run the code it works as expected. I tryed to comment parts of the code to understand what is going on but with no hope.

Answer 1

I've noticed you are doing side-effects in map, which is not going to work because map is lazy, i.e. it won't evaluate unless you try to use sequence it produces, which explains why it works in the REPL, but not in the browser.

For quickest and dirtiest fix, try using dorun to force evaluation of your sequence: (dorun (map #(do ...... ).

or, idiomatically, rewrite your code to something resembling this (which is not very idiomatic):

(doseq [[el cor-to-add] (map vector linguas-visiveis cores)]
  (ef/at (str "#" el)
         (ef/add-class cor-to-add))
  (doseq [cor-to-remove (remove #{cor} cores)]
    (ef/at (str "#" el)
           (ef/remove-class cor-to-remove)))
  )

or this, removing all classes from every element, first:

(doseq [el linguas-visiveis
        cor cores]
  (ef/at (str "#" el)
         (ef/remove-class cor)))

and adding only required classes later:

(doseq [[el cor] (map vector linguas-visiveis cores)]
  (ef/at (str "#" el)
         (ef/add-class cor)))