Rails select opton using images - ruby-on-rails

i have a select_tag in my rails form where i want to show images as option, i tried searching for a solution online but there is nothing quite good.
my form
<%= form.select :transport, ['Select an image', 'http://pngimg.com/uploads/tesla_car/tesla_car_PNG24.png', 'http://pluspng.com/img-png/png-hd-bike-ktm-duke-bike-png-download-1600.png' %>
i want something like this:
click here

Instead of struggling to let Rails handle it, It's recommended to use JQuery to populate options in the drop-down list.
This link guides you through the process to do it.
Click Here

Related

Rails Form: f.select for multiple options

For my user form, I have a hobbies drop-down menu and I want to be able to select more than one option (one user may have skiing, reading, and chess as hobbies).
Of course, doing this is very easy!
However, none of the available options seem to work for me...
Here's my code:
<%= f.select :hobbies, [['Chess','chess'],
['Movies','movies'],
['Videogames','videogames'],
['Skiing', 'skiing'],
['Reading','reading']],
{:multiple => true} %>
However, when I look at my form, I don't think this is working. It makes the drop-down menu....but how do I select multiple entries? I try ctr + click but it doesn't do anything....what am I missing? It keeps just selecting one value only...
Take a look at the accepted answer to that question - the method signature is:
select(:type, [data], {options hash}, {second options hash})
And in the answer, it has multiple: true in the second options hash.
API dock for select_tag gives a hint about what the two different hashes are for - it looks like the first options hash is for "option_tags", and the second one is for "options"

Zurb Foundation dropdown button not showing drop-triangle

I am new to Zurb's Foundation and have come across an unusual quirk. I have placed a dropdown button on a form, and am using it as a 'state-picker'. However, no matter which dropdown button style, size or color I choose, the dropdown 'triangle' image doesn't show. SimilarlyThe call to the button is inside a Rails 3 select method and the options are off in a helper file. Here is the code:
<div class="large-2 columns">
<%= f.select :billing_state, options_for_select(us_states), {},
:class => "small radius button dropdown" %>
</div>
See the photo here:
I have verified that a regular html dropdown button request is working on the same page with:
foo
See here:
I am stumped! I have even tried the 'Split Button', which doesn't have a 'Split pipe & triangle'. Any ideas? cheers!
Zurb uses a completely different way of styling things to the rails select html output. Passing a class to the select method doesn't really help. I've found that I needed to code the html manually in my projects when using Zurb and the dropdowns.
I haven't found the interaction between form helpers and Zurb as straightforward as with Twitter Bootstrap.
This page explains the Zurb approach to styling select boxes using custom form. http://foundation.zurb.com/docs/components/custom-forms.html
Basically they use styled span's.
Hope this helps.

Rendering field data as a link in Ruby on Rails

Ok, I think this is probably an easy question but for the life of my I can't figure it out. I have created a table called ugtags and in that table I have two columns (beyond the basics), 'name' and 'link'.
I am trying to allow a user to add a link to a page. Ideally they would enter the link title (name) and the url (link) and in the view it would display the title as a link to the url that was entered in the link column.
I there a way to do it by simply affecting the <%= link_to h(ugtag.name) %> code?
You should just be able to do:
<%= link_to h(ugtag.name), ugtag.link %>
See the documentation for all of the relevant options.

How to generate a select box by using options_from_collection_for_select

I am really confused with select boxes in ROR. How can I generate a working select box by using options_from_collection_for_select. This will only generate the option tags and not the select tag? Can anyone please provide me an example on how to use this.
I am having a hard time understanding select boxes, I don't know why...
Thanks
<% options = options_from_collection_for_select(#awesome_options, 'id', 'name') %>
<%= f.select :awesome_column, options %>
If you could give a little more insight into the error you are getting, we might be able to provide you with a better answer, but I believe the above is the basic gist of options_from_collection.

gmail-like popup checkbox list in rails?

I need to build something like what gmail does for it's labels... It has a button that when pressed pops up a scrolling list displaying the labels with checkboxes for selection.
I'd like to hear about approaches to do the popup and how to place it right under the button.
Also, I'd like to be able to observe the checkbox select/deselect events and take action, so advice on that part would also be appreciated... otherwise, I guess I'll have to put a form with a submit button and handle the new selections when the user submits.
If the checkbox list is static, you can do all this directly in the rendered action. Otherwise, two approaches are possible:
Use button_to_remote to retrieve an action displaying the popup and also serving the necessary js;
Use button_to_function to retrieve some XML or json (at your option) from an action, with the necessary labels and values for checkboxes, then render the popup.
The first may be easier to do if you're not familiar with all this, while the second is way more efficient, as only data is passed through the asynchronous call, and not markup nor javascript.
About your last question, if (un)checking the checkbox must result in a server side action, prototype_helper provides a convenient observe_field function, to be used like this:
<%= check_box "foo", "bar" %>
<%= observe_field "foo_bar", :url => {:action => :some_action, :controller => :some_controller} %>
If the (un)checking can be managed on client side, you can simply use:
<%= check_box "foo", "bar", { :onclick => "someFunctionToDoWhatINeed(someArg);"} %>
Just two notes:
JavascriptHelper and PrototypeHelper are just this, helpers: they allow you to do some things with a very simple syntax and are great, as long as they are helping; when they are no more, feel free to drop them and go for plain javascript.
I've used prototype for a while, but then I fell in love with jquery; you may want to take a look at it.
Please edit your question or comment my answer if I didn't understand your question and/or was unhelpful.

Resources