Dependent picklists using Reagent

[Jonathon McKitrick]

I have three select components (picklists) which are dependent. The first determines the values of the second, and so on to the third. I'm able to get the first pair working, but the second pair has been tricky.

Has anyone implemented something similar?

[Harsha / Mr. Foo Bar]

On Sunday, August 3, 2014 1:18:14 AM UTC+5:30, Jonathon McKitrick wrote:
> I have three select ....

I assume A B' and B'' C, are the pairs.

B and B'' can have a common core.async.

With that you can send,

A -> B' , B' -> core.async -> B", B" -> C

to get all your dependancies in order.

[Jonathon McKitrick]

I'm not familiar with that approach of using core.async. I'm simply using callbacks to set the atom each select depends on. Is there a better way with core.async?

[Harsha]

> I'm not familiar with that approach of using core.async. I'm simply using callbacks to set the atom each select depends on. Is there a better way with core.async?

I'm afraid I can't really suggest much without concrete code.
I may be giving a rather generic solution.

Basically core.async can be used to decouple everything.

(def main-chan (chan))

(def A
....
(>! main-chain {:changed :A :data ["something"]})
...)

(def B
...
(go (loop []
(let [info (<! main-chan)]
(cond (= (:changed info) :A)
;; A has changed.
(update B-picklist? (:data info)))
....
(recur))
...)

A is dependant on B is same as B wants to know when A changes.
Whenever A changes do (>! main-chain {:changed :A :data ["something"]})

This is a bit like using a message bus, but a very efficient one.

Hope that helps.

[Jonathon McKitrick]

I started researching core.async after reading your post.  I'm curious how it's implemented in single-threaded javascript.

--
Jonathon McKitrick

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to a topic in the Google Groups "ClojureScript" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/clojurescript/p2aLNuVtjLU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.

[Sreeharsha Mudivarti]

That's something I am curious about too.

ES6 Generators are similar, I think.

In case you are wondering about performance,

checkout -- https://swannodette.github.io/2013/08/02/100000-processes/

In practical terms, you can have 1000s of go blocks without any performance

loss.

​ 

[Sreeharsha Mudivarti]

Also just remembered,

Maybe you can use atom watchers ?

http://blog.fogus.me/2011/09/23/clojurescript-watchers-and-validators/

[Mikey Griffiths]

See https://github.com/clojure/core.async/blob/master/src/main/clojure/cljs/core/async/impl/dispatch.cljs - it uses one of MessageChannel[0], setImmediate[1] or setTimeout[2] depending on which is available in the current browser.

[0]: http://msdn.microsoft.com/en-us/library/windows/apps/hh441303.aspx
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Window.setImmediate
[2]: https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

[Mike Thompson]

On Sunday, August 3, 2014 5:48:14 AM UTC+10, Jonathon McKitrick wrote:
> I have three select components (picklists) which are dependent. The first determines the values of the second, and so on to the third. I'm able to get the first pair working, but the second pair has been tricky.
>
> Has anyone implemented something similar?

Do you mean you want to implement something like this example (of 5 dependent pickers):

http://www.minddigital.com/wp-content/uploads/2013/12/sample-Image.jpg

--
Mike

[Jonathon McKitrick]

Exactly!

--
Jonathon McKitrick

[Harsha]

On Tuesday, August 5, 2014 7:33:15 PM UTC+5:30, Jonathon McKitrick wrote:
> Exactly!
>
>
>

Damn ! The word picklist completely threw me off.

https://github.com/tailrecursion/javelin was built for this sort of problem.

In Mike's example you would have one cell holding all the ui data and 6 formulas.

cell -> continent
This triggers updates to country -> state -> county -> city formulas

cell -> county
This triggers updates to the city formula.

In the formulas you could call set-state! to trigger ui updates.

The sixth formula can just hold the final calculation.

Take a look at the docs, for a description of the words cell and formula.
Javelin is a very simple library modelled after spreadsheets.

[Ivan L]

What approaches have you tried? I would assume that if you have 3 reagent atoms holding each list data and you swap the next lists data in the parent, it should work fine.