I'm trying to write reusable tag control with reagent. What I need to do is to focus input field after user clicks ancestor div element. To be more clear, I would like to set focus on input with class tag-input after user clicks div with class form-element How can I implement this?
[:div.form-element
[:div.some-other-class
[:ul
[:li "entered-tag"]
]
]
[:input.tag-input {:type "text"}]
]
you have to implement some oldschool click handling i guess:
[:div.form-element
{:on-click #(do (println :click-click)
(.focus (.getElementById js/document "my-input")))}
[:div.some-other-class
[:ul [:li "entered-tag"]]]
[:input.tag-input {:type "text" :id "my-input"}]]
so you probably should create some factory function for this form-element stuff:
(defn form-element [id]
[:div.form-element
{:on-click #(.focus (.getElementById js/document id))}
[:div.some-other-class
[:ul [:li "entered-tag"]]]
[:input.tag-input {:type "text" :id id}]])
and use it like this:
[:div
(form-element "form-element-1")
(form-element "form-element-2")]
works fine for me
Related
I'm using the Play framework in Scala. I have this radio button that lets you choose between two options from a form:
#helpers.inputRadioGroup(searchForm("options"), Seq("option1" -> "Option 1", "option2" -> "Option 2"))
I also have another form that doesn't use helpers and has onclick events that send data to Google Analytics depending on which option you choose:
<form>
<input type="radio" name="option1" onclick="ga('send', 'event', { eventCategory: 'searchForm', eventAction: 'options', eventLabel: 'option1'})" value="#searchForm("options")">Option 1<br>
<input type="radio" name="option2" onclick="ga('send', 'event', { eventCategory: 'searchForm', eventAction: 'options', eventLabel: 'option2'})" value="#searchForm("options")">Option 2<br>
</form>
My question is how do I apply the second form's onclick events to the first example?
Each of the helper objects like inputRadioGroup has an apply method as documented here, for example (for play 2.3): https://www.playframework.com/documentation/2.3.x/api/scala/index.html#views.html.helper.inputRadioGroup$
Here's the definition of apply:
def apply(
field: Field,
options: Seq[(String, String)],
args: (Symbol, Any)*)(
implicit handler: FieldConstructor, lang: Lang):
play.twirl.api.HtmlFormat.Appendable
and then an example from the documentation
#inputRadioGroup(
contactForm("gender"),
options = Seq("M"->"Male","F"->"Female"),
'_label -> "Gender",
'_error -> contactForm("gender").error.map(_.withMessage("select gender")))
we see that tag attributes are provided as varargs in the form of a pair of Symbol and Any. So, we can rewrite your tag as follows:
#helpers.inputRadioGroup(
searchForm("options"),
Seq("option1" -> "Option 1", "option2" -> "Option 2"),
'onclick -> "ga('send', 'event', { eventCategory: 'searchForm', eventAction: 'options', eventLabel: 'option1'})"
)
I am working on a solution to add custom data-attributes to option-tags with the collection_select form helper in Rails.
I studied some posts at stackoverflow and did a lot of trial and error after consulting some API documentation. I am nearly there but sadly my solution only adds attributes to the select-tag not to the option-tags.
This way I am populating the html-options-hash (6th position):
<%= f.collection_select(:parallax_id, #parallax.all, :id, :title, {}, { :"data-icon" => #parallax.map{ |p| "#{p.image}"}} ) %>
This results in a select tag like:
<select data-icon="/uploads/image/image/4/169_strecken-ausgang.jpg" name="game[parallax_id]" id="game_parallax_id">...</select>
But I want the option to get the data-icon attribute. When I switch positions and add my data-icon to the options-hash (5th position) nothing is output.
Is this what you want?
= f.select :parallax_id, options_for_select(#parallax.map {|p| [p.title, p.id, {'data-icon' => p.image }]})
Just FYI I was looking at this matter, found the more fitting solution here: How do I set the HTML options for collection_select in Rails?.
Here is guy that made a lot of effort:
.picture{:"ng-repeat" => "picture in pictures"}
%h2 {{picture.title}}
%a{ :ng-href => "pictures/{{$index}}"}
%img{:src => "{{picture.url}}"
tried to
%a{ :ng-href => "pictures/{{$index}}"}
%img{:src => "{{picture.url}}"
and %a{ :ng-href => "pictures/{{$index}}"}<
%img{:src => "{{picture.url}}">
but nothing works. can't find in haml documentation (these are so bad docs....) answer for my question. Does anyone know how to put inside in haml?
I had the same trouble properly placing my image inside the anchor, and got the following solution for rails:
Inside your view.html.haml, with embedded rails helpers:
= link_to image_tag('name_of_the_asset', alt: 'title'), root_path
(root_path is using the url_for helper but chan be changed for "https://www.someexample.com")
the html I have is generated by ruby with:
<%= link_to "change", "http://gravatar.com/emails" %>
which results in:
change
but I want to ensure that the link opens in a new tab with the
target="blank"
attribute
the rspec test looks like:
it { should have_link('change', href: 'http://gravatar.com/emails', target: '_blank') }
but the test still passes when I don't have the target attribute being generated.
The following works for me with capybara 1.1.2:
it { should have_selector("a[href='http://gravatar.com/emails'][target='_blank']") }
I'm using the have_selector to handle every attribute:
should have_selector('a',
:href => 'http://gravatar.com/emails',
:target => '_blank',
:content => 'change'
)
I think you need capybara to have that matcher http://rubydoc.info/github/jnicklas/capybara/Capybara/RSpecMatchers/HaveSelector
I have one input field and 2 buttons, each button performs a different function. i want one of the buttons to take the value of the input field and add it to a specified Url (as a param) that button should go to.
so if the value inserted in to the box is "dog" then after clicking the button the URL should be "/go_somwhere?value=dog"
can i do it in just html or do i need a ruby method?
i'm using rails.
thanks
<% form_for :item, :url=>{:action=>'go_somwhere'}, :html => { :method=>"get"} do|f| %>
<%= text_field_tag :value, "" %>
<input type="submit" value="Submit" >
<% end %>
Seems like you would need to do this via javascript on the client side . The button should have a function attached to its click event . This function should read the value from the input box and change the url ( window.locations ) .