使用Noir的webapp：如何在不使用javascript的情况下显示相关的下拉菜单

Question

I am trying to write a simple web application using Noir that has a series of drop-down menus whose contents change, depending upon what was selected in the previous drop-down menu(s). These options are then submitted as a form. While there exists plenty of information on the web about how to do this using straight-up javascript, I would prefer to stick with Clojure. I am using Noir 1.2.1 and Hiccup 0.3.6.

My current attempt looks something like this (fh is hiccup.form-helpers:

(defpage "/run-experiment" []
  (common/layout 
    (fh/form-to [:post "/run-experiment"]
      (fh/label "dd1" "Drop Down 1:")
      (fh/drop-down :opts1 '(Opt1A Opt1B) 'Opt1A)
      (fh/label "dd2" "Drop Down 2:")
      (fh/drop-down :opts2 (cond (= 'Opt1A (get-opt1)) '(Opt2A1 Opt2A2)
                                 (= 'Opt1B (get-opt1)) '(Opt2B1 Opt2B2))))))

(rather than a cond, I'd implement the above with a map, but for now I though this was clearer)

I would like to be able to get the text value of the selected element of the first drop down and display html for the second element based upon that value. I'm trying to figure out if there's a way, using Hiccup, to generate the Javascript necessary for the onclick argument I'll need to add to the first drop-down. Furthermore, I'm trying to figure out if there's a way to access the id value for the other elements of the form so I can link them in the resultant Javascript/HTML. Ideally, I'm hoping for something that's like what Hiccup does for HTML, but for Javascript. I thought Clojurescript might be a good candidate, but it seems like it might be more than what I'm looking for. I think what I want is a lightweight library that generates strings of common Javascript tasks that can be used in conjunction with Hiccup.

Answer 1

I know this is ugly, but you can insert javascript as string literals with hiccup:

(hiccup.element/javascript-tag "alert(\"hello world\")")

But then why not just write js..