I am new to Clojurescript and trying to test basic functions -- in this case creating a popup.
This code displays the button:
[:div {:class "dim-a item"}
[dc :div {:dc-id 3 :hidden false}
[:div {:class "item"
:style {:border "1px solid #D4D4D4"
:border-radius "3px"}}
[:div [bp/icon {:icon "grid-view" :style {:color "#555555"}}] [:br] "Color"]]]]
This is what I tried to create the popup, but it does not compile.
[:div {:class "dim-a item"}
[dc :div {:dc-id 3 :hidden false}
[:div {:class "item"
:style {:border "1px solid #D4D4D4"
:border-radius "3px"}}
[:div [bp/icon {:icon "grid-view" :style {:color "#555555" {:on-click #(reset! popup-shown false)}
[:div.alert.alert-info
[:div "Hello!"]]}}] [:br] "Color"]]]]
Can anyone see what I'm doing wrong?
EDIT:
When I try this:
[:div {:class "dim-a item"}
[dc :div {:dc-id 3 :hidden false}
[:div {:class "item"
:style {:border "1px solid #D4D4D4"
:border-radius "3px"}}
[:div [bp/icon {:icon "grid-view"
:style {:color "#555555" {:on-click #(reset! popup-shown false)}}}
[:div.alert.alert-info
[:div "Hello!"]]] [:br] "Color"]]]]
I get this:
------ ERROR -------------------------------------------------------------------
File: /Users/reallymemorable/Documents/m/renderer.cljs:750:100
--------------------------------------------------------------------------------
747 | :style {:border "1px solid #D4D4D4"
748 | :border-radius "3px"}}
749 | [:div [bp/icon {:icon "grid-view"
750 | :style {:color "#555555" {:on-click #(reset! popup-shown false)}}}
----------------------------------------------------------------------------------------------------------^
m/renderer.cljs [line 750, col 100] The map literal starting with :color on line 750 column 41 contains 3 form(s). Map literals must contain an even number of forms.
--------------------------------------------------------------------------------
751 | [:div.alert.alert-info
752 | [:div "Hello!"]]] [:br] "Color"]]]]
753 |
754 | [:div {:class "dim-c"}
--------------------------------------------------------------------------------
EDIT #2:
I realize that I part of my difficulty was that the on-click code I had copied from another source had irrelevant details. I've started over with a much simpler example.
[:div {:class "bp3-button"} [bp/icon {:icon "globe" :on-click "hello" :style {:color "#555555"}}]]
The above code compiles, but when I click the icon, nothing happens. Sorry, I know this is a terrible way to get help with a question, but super new to Clojurescript and feeling my way through the darkness.
It's a bit hard without seeing the actual compilation error, or what the bp namespace is for (I'm guessing it's related to Bootstrap?), but if you fix the indentation a bit, I think it's the following:
You have this
[:div [bp/icon {:icon "grid-view"
:style {:color "#555555" {:on-click #(reset! popup-shown false)}
[:div.alert.alert-info
[:div "Hello!"]]}}] [:br] "Color"]]]]
Your [:div.alert.alert-info is misplaced as a child of :style. What I think you meant is:
[:div [bp/icon {:icon "grid-view"
:style {:color "#555555" {:on-click #(reset! popup-shown false)}}}
[:div.alert.alert-info
[:div "Hello!"]]] [:br] "Color"]]]]
Edit: Based on your output, the code probably needs to look like this instead:
[:div [bp/icon {:icon "grid-view"
:on-click #(reset! popup-shown false)
:style {:color "#555555"}}
[:div.alert.alert-info
[:div "Hello!"]]] [:br] "Color"]]]]
This won't solve your original question, but I went ahead and created a small demo project in this repo that renders a couple of buttons, one just prints on the console and the second shows an example dialog, just like in the screenshot below:
It should work with yarn install ; yarn run html ; yarn run watch.
Related
I have a container with two columns, an image on the left and text on the right (I'm making a landing page based on the one from ClojureBridge London). Right now the text is at the top of the column. How do I bring it down to the middle? (I'm totally new to all this so thanks for your patience).
As you can see, I tried to add a bunch of spans and empty paragraphs and they didn't do anything. What am I supposed to be doing here?
[:div {:class "container"}
[:div {:class "box"}
[:div {:class "columns"}
[:div {:class "column"}
[:figure {:class "image"}
[:img {:src "img/picture.png"}]]]
[:div {:class "column"}
[:div {:class "content"}
[:span]
[:h2 "This is a header"]
[:p "This is a paragraph."]
[:p "More paragraph."]
[:p
[:a {:href "https://clojurebridgelondon.github.io/organise-clojurebridge-london/"
:target "_blank"}
"Example of a link"]]
[:span]
[:p " "]]
[:span]
[:div {:class "content"}]]]]]
(defn text-input
[label]
[:div.row
[:div.col-md-2
[:span label]]
[:div.col-md-3
[:input {:type "text" :class "form-control" :style {:border "1px solid red"}}]]])
(defn hello-world
[]
[:div.page-header
[:h1 "Reagent Form"]
[text-input "First name" ]
[text-input "last name"]
[text-input "mobile number"]
[text-input "address"]
[:button {:type "submit" :class "btn btn-default"
:on-click #(.log js/console (clj->js #state))} "Submit"] ])
If you want to print the value from the event you can use an on-click handler like this:
(fn [event] (.log js/console (-> event .-target .-value)))
So use that instead of #(.log js/console (clj->js #state)).
See http://reagent-project.github.io/ for examples of using the target value. E.g.,
(ns example
(:require [reagent.core :as r]))
(defn atom-input [value]
[:input {:type "text"
:value #value
:on-change #(reset! value (-> % .-target .-value))}])
(defn shared-state []
(let [val (r/atom "foo")]
(fn []
[:div
[:p "The value is now: " #val]
[:p "Change it here: " [atom-input val]]])))
I am using Rails 3.2.14, MySQL and simple_form for my application.
I have notification_time column field set to datetime and I customized it as text field like this in _create_form.erb
<%= f.input :notification_time, :input_html => { :value => DateTime.now.strftime("%d/%m/%Y - %H:%M %p")}, :as => :string %>
This results to 08/10/2013 - 13:50 PM on the browser.
I have an _update_form.erb with just <%= f.input :notification_time, :as => :string %>, and it results to 2013-10-08 13:50:00 -0400
How to make sure I can get 08/10/2013 - 13:50 PM when I update the form too??
Well, you're never setting how it looks.
In your first block of code, you're doing DateTime.now.strftime("%d/%m/%Y - %H:%M %p"), but you're never doing that anywhere in your second block of code.
I would assume in your _update_form.erb you have a variable that corresponds to the form you're updating.
So let's call that #form.
Then you can just do this: <%= f.input :notification_time, :value => #form.notification_time.strftime("%d/%m/%Y - %H:%M %p"), :as => :string %>... or something of that sort.
I'm trying to get this simple list working, but the ul is closing and not enclosing the li elements in the loop. Am I missing a simple way to do this?
%ul.nav.nav-tabs.nav-stacked
- #courses.each do |c|
%li
= link_to "add", { :controller => "admin/relateds", :action => "edit", :id => c.id }, :confirm => "Are you sure?"
= c.coursetitle
The %li needs indentation because it is within a do block. Even if it is valid markup it will save you debugging time if you opt to use 2 or 4 spaces for indentation for better legibility, as one is very difficult to discern.
%ul.nav.nav-tabs.nav-stacked
- #courses.each do |c|
%li
= link_to "add", { :controller => "admin/relateds", :action => "edit", :id => c.id }, :confirm => "Are you sure?"
= c.coursetitle
you need to indent the %li and what's supposed to be inside. Currently your loop does nothing.
This question is related to this other question:
Change rails text_field form builder type
I have a JQuery Tools Range in my form, and making it work requires that the input field be of the type "date". Rails doesn't easily allow me to do this so I've used a manual tag as follows:
<% form_for #customer, :url => {:action => "update", :id => #customer} do |f| %>
...
<%= tag(:input, {:type => :range, :value => f.object.travel, :name => "travel", :min => "0", :max => "100" }) %>
...
<% end %>
This tag shows the range slider. It also displays the right value from the database. However, when I submit a change, the "travel" attribute is sent as a general attribute and not under "customer". So, my database doesn't update.
How can I rewrite the tag so it gets included as a "customer" attribute?
Try:
<%= tag(:input, {:type => :range, :value => f.object.travel, :name => "customer[travel]", :min => "0", :max => "100" }) %>