Webpage not updating

Question

I am new to re-frame and I think I'm forgetting something obvious. My web page is coming up and working but doesn't seem to update when I click on a radio button. Basically, what I am wanting to do is when a radio button is clicked, it updates my value-name atom to 2. Doing this should cause the page to refresh since the function display-val is dependent on value-name. However, nothing happens.

I have the feeling I should be subscribing to something so that display-val knows to update.

Here is my code:

(def q-id (atom 0))
(def value-name (atom ""))
(def next-id (atom 0))

(defn create-answer
  "Creates a radio button answer"
  ([question-id answer value name event next-question-id class description]
   [:div {:class :control-container}
    [:div {:class :control-left}
     [:input {:type :radio :value value :name name :class class :data-next next-question-id :on-change (fn [e] (reset! value-name value) (reset! q-id question-id) (reset! next-id next-question-id) (re-frame/dispatch [event e]))}]]
    [:div {:class :control-right} answer]
    ; If there is no description, then do not render the "control-right-description" div
    (if-not (clojure.string/blank? description)
      [:div {:class :control-right-description} description])
    ])
  ([question-id answer value name event next-question-id class]
   (create-answer question-id answer value name event next-question-id class ""))
  )

(defn display-val
  [item]
  (if (or (= @next-id (get item :id)) (and (get item :first) (= @next-id 0))) "block" "none")
  )

(defn create-block
  "Renders a question and the possible answers"
  [item]
  (if (get item :first)
    [:div {:id (str "divQ" (get item :id)) :style {:display (display-val item)}}
     [:div
      [:p (get item :question)]
      (for [answer (get item :answers)]
        (create-answer (get item :id) (get answer :answer) (get answer :value) (get answer :name) (get answer :event) (get answer :nextQuestionId) (get answer :className) (get answer :description))
        )
      ]
     ]
    [:div {:id (str "divQ" (get item :id)) :style {:display (display-val item)}}
     [:div
      [:p (get item :question)]
      (for [answer (get item :answers)]
        (create-answer (get item :id) (get answer :answer) (get answer :value) (get answer :name) (get answer :event) (get answer :nextQuestionId) (get answer :className) (get answer :description))
        )
      ]
     ]
    )
  )

(defn render-questions
  "Renders the questions and answers, hiding all but the first question and answer set"
  []
  (for [item cfg/questions]
    (create-block item)
    )
  )

(defn main-panel []
  (let [name (re-frame/subscribe [:name])] 
    (fn []
      [:div

       ; Render the questions
       (render-questions)

       ]

      )))




(defn handle-buttons-part-one
  [db e]


  ;(js/alert @value-name)
  )
(re-frame/reg-event-db :buttons-part-one handle-buttons-part-one)

Answer 1

Please have a look on this example, you will get an idea of how a re-frame app should look like.

https://day8.github.io/re-playground/?gist-id=saskali/1398f41345ea4df551b0c370ac1ac822

TL;DR

• error 1: the ui update will only be triggered by reagent's atom/reaction. not atom
• error 2: using form-1 component instead of form-2/form-3
• error 3: list items should be keyed
• error 4: using () instead of [] for reagent component
• error 5: no initialization for re-frame db

I think you need to read all the documentation of re-frame, re-frame documentation is great and should be read again and again.

https://github.com/Day8/re-frame

Here is a simplest example for you to understand

(ns simple.core
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]
            [clojure.string :as str]))

(rf/reg-event-db              ;; sets up initial application state
  :initialize                 
  (fn [_ _]  
    {:counter 0}))

(rf/reg-event-db 
  :counter-inc            
  (fn [db [_]]
    (update db :counter inc)))   ;; compute and return the new application state

(rf/reg-sub
  :counter
  (fn [db _]  
    (:counter db))) ;; return a query computation over the application state

(defn ui
  []
  [:div
   [:h1 "Hello world, it is now"]
   [:span @(rf/subscribe [:counter])]
   [:button {:on-click #(rf/dispatch [:counter-inc])}
     "inc"]])

(defn ^:export run
  []
  (rf/dispatch-sync [:initialize])     ;; puts a value into application state
  (reagent/render [ui]              ;; mount the application's ui into '<div id="app" />'
                  (js/document.getElementById "app")))

(run)