This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-01-18
Channels
- # admin-announcements (90)
- # alda (1)
- # aws (23)
- # beginners (60)
- # boot (217)
- # cljs-dev (20)
- # cljsjs (23)
- # cljsrn (85)
- # clojars (28)
- # clojure (101)
- # clojure-art (1)
- # clojure-berlin (10)
- # clojure-dev (16)
- # clojure-my (2)
- # clojure-russia (194)
- # clojure-sg (7)
- # clojure-ukraine (1)
- # clojured (1)
- # clojurescript (99)
- # clojurex (1)
- # community-development (6)
- # core-matrix (11)
- # cursive (26)
- # datomic (51)
- # euroclojure (30)
- # hoplon (560)
- # jobs (44)
- # ldnclj (34)
- # mount (23)
- # music (3)
- # off-topic (10)
- # om (145)
- # onyx (3)
- # perun (38)
- # portland-or (2)
- # proton (55)
- # re-frame (64)
- # reagent (26)
- # ring-swagger (3)
- # spacemacs (21)
- # sydney (3)
- # yada (1)
Hey guys, I’ve been trying to hook up @pupeno’s free-form with semantic-ui, and I’m having some trouble. It’s probably something totally obvious :) It’s the log-in form, you can see the working bootstrap version commented out below it. I can’t seem to get that on-submit action to fire, so it must be in the wrong place. What am I doing wrong? https://github.com/sooheon/tomaton/blob/master/src/cljs/tomaton/components/log_in_register.cljs#L17
sooheon: are you using version 0.2.0 of free-form?
sooheon: the form tag should be inside the call too free-form/form
I don’t think this is the problem, but I never had it outside, so I’m not sure about the implications.
pupeno: hasn’t fixed it, but good to know. FWIW, the update-form handler is firing properly for each field, I can see that in the state viewer.
sooheon: when you press the submit button, I don’t see anything that should prevent the form from actually being submitted. Are you sure this isn’t happening? did you look at the network traffic in chrome inspector?
That submittion would make the console message dissapear.
not sure what i should be looking for in the network traffic, but there’s nothing interesting happening
sooheon: the browser should refresh the page, so, something is broken there.
I’m not familiar with semantic-ui.
Can you inspect the form in chrome or firefox and show me a screenshot of the DOM?
Ah, got it!
You don’t have a submit button.
:div.ui.fluid.submit.button probably looks like one, but it isn’t one.
It’s a :div.
You need either a :button or a :input with {:type “submit”}
And then, you’ll need to actually stop the form from submitting in your on-submit event. This is how I do it: https://github.com/carouselapps/ninjatools/blob/master/src/cljs/ninjatools/ui.cljs#L13
Maybe this should be in free-form somehow.
What do you mean by hooking up the error messages?
so the second arg to free-form/form is the error map, in ninjatools those errors appear below each field correctly, I’m wondering how I can do that outside of bootstrap
You mean because you are using semantic-ui instead of bootstrap?
Does semantic-ui have a recommended way of displaying error messages?
Heres one way in action: http://semantic-ui.com/examples/login.html
This is how you display error messages: https://github.com/carouselapps/free-form-examples/blob/master/src/cljs/free_form_examples/forms/reagent/plain.cljs#L23
You can do that for every key in :-errors, bellow your form.
Yes, it’s a sort of template, that will spit out: [:p.error “Please enter your email”] [:p.error “Please enter a valid e-mail”] ...
:free-form/error-message expects a key… I can see you would benefit from one that doesn’t and that instead outputs all error messages. Pull requests are welcome 😉
I see and the map for free-form/error-class is {:key $what key the error is for, :error $the error class to append}?
Also, we do have shortcuts to generate bootstrap-3 forms. Shortcuts to generate semantic-ui forms are also welcome, so you can nicely encapsulate all these decisions for you and other devs.
I’ll see what I can contribute… maybe with more of your help later :P. Thanks for everything, as well. Ninjatools taught me how to set up a db connection too, and it’s really helpful to see the details that a lot of documentation skims over because they assume a reader with more experience.
sooheon: Ninjatools is based on an old Luminus, so you might want to check Luminus for cleaner, newer, better techniques to handle the db connection.
sooheon: and I think a lot of people avoid talking about the db connection because it’s actually surprisingly hard to do in a functional way that also has the right encapsulation so people just avoid the bad spot.
Yeah I am reading a lot of luminus docs as well, but its a little less helpful than a functioning whole.
If you want to work on free-form itself, let me know and I’m happy to pair and help you understand the codebase.
The examples are working again: http://free-form-examples.carouselapps.com/
what I'd like to do:
(defn ticket-list [tag]
(when tag
(let [tickets (subscribe [:tickets tag])]
(fn [tag]
[:div.ticket-list.container-fluid
(map #(do ^{:key (str "ticket-" (:z-id %))} [ticket %]) @tickets (range))]))))
the thing that calls this component:
(defn page []
(let [user-info (subscribe [:user-info])
admin (subscribe [:is-admin])
user-tags (subscribe [:user-tags])
active-tag (subscribe [:active-tag])]
(fn []
[:div.home
(if (= 0 (count @user-tags))
[:div.jumbotron
[:div.container
[:h1 "There's nothing here!"]
[:p "You have no subscriptions. Add some in your "
[:a {:href "/#/settings"} "settings"]
"."]]]
(list
^{:key "tag-nav"} [tag-nav]
^{:key "ticket-list"} [ticket-list @active-tag]))])))
@frank look at using dynamic subscriptions ... some early docs here .... https://github.com/Day8/re-frame/wiki/Dynamic-Subscriptions
can anybody see anything immediately wrong with this setup? view code: http://puu.sh/mAOMd/5f6ac963a8.png view output: http://puu.sh/mAOMZ/1be772b30c.png subscription code: http://puu.sh/mAOPY/ac63998faa.png db structure: http://puu.sh/mAORR/3c4c0f65b4.png
thanks @gadfly361
No problem! Check out https://github.com/Day8/re-frame/wiki/When-do-components-update%3F