Fork me on GitHub

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?

Pablo Fernandez08:01:36

sooheon: are you using version 0.2.0 of free-form?

Pablo Fernandez08:01:51

sooheon: the form tag should be inside the call too free-form/form

Pablo Fernandez08:01:17

I don’t think this is the problem, but I never had it outside, so I’m not sure about the implications.


Ok I will try that first


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.

Pablo Fernandez08:01:41

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?

Pablo Fernandez08:01:43

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


No page refresh, nothing new in the console

Pablo Fernandez08:01:35

sooheon: the browser should refresh the page, so, something is broken there.


so it’s purely my use of semantic-ui that’s wrong


most likely

Pablo Fernandez08:01:17

I’m not familiar with semantic-ui.

Pablo Fernandez08:01:43

Can you inspect the form in chrome or firefox and show me a screenshot of the DOM?

Pablo Fernandez09:01:39

You don’t have a submit button.

Pablo Fernandez09:01:02

:div.ui.fluid.submit.button probably looks like one, but it isn’t one.

Pablo Fernandez09:01:27

You need either a :button or a :input with {:type “submit”}


thanks that sounds like it :)


I was taking it from the demo on the site :p

Pablo Fernandez09:01:35

And then, you’ll need to actually stop the form from submitting in your on-submit event. This is how I do it:

Pablo Fernandez09:01:45

Maybe this should be in free-form somehow.


Awesome, it submits as expected.


What do you think would be the best way for me to hook up the error messages?

Pablo Fernandez09:01:51

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

Pablo Fernandez09:01:59

You mean because you are using semantic-ui instead of bootstrap?

Pablo Fernandez09:01:34

Does semantic-ui have a recommended way of displaying error messages?


I was trying to replicate that

Pablo Fernandez09:01:28

You can do that for every key in :-errors, bellow your form.


the [p.error] is where the error message will end up right?

Pablo Fernandez09:01:49

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”] ...

Pablo Fernandez09:01:37

: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}?

Pablo Fernandez09:01:57

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.

Pablo Fernandez09:01:39

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.

Pablo Fernandez09:01:21

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.

Pablo Fernandez09:01:39

If you want to work on free-form itself, let me know and I’m happy to pair and help you understand the codebase.


Sure. Thanks for the offer! I’ll let you know as I understand it better.


Is it possible to dynamically change subscription parameters in a component?


what I'd like to do:

(defn ticket-list [tag]
  (when tag
    (let [tickets (subscribe [:tickets tag])]
      (fn [tag]
         (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 []
       (if (= 0 (count @user-tags))
           [:h1 "There's nothing here!"]
           [:p "You have no subscriptions. Add some in your "
            [:a {:href "/#/settings"} "settings"]
          ^{:key "tag-nav"} [tag-nav]
          ^{:key "ticket-list"} [ticket-list @active-tag]))])))


@frank look at using dynamic subscriptions ... some early docs here ....


can anybody see anything immediately wrong with this setup? view code: view output: subscription code: db structure:


Try dereffing post inside the div. @post


still a touch confused as to when to deref things VS when to not