Question

I’ve been struggling with finding the best approach to this issue for over a week now (yes, I’m a newbie). In my app, users create projects and then build relationships (“pfollow”) with their choice of plant objects in my database.

I’ve been using a collection_select styled with a dropdown Jquery select plugin called “listselect” up till now (and it works fine), but I now want to be able to feature the plant choices as images–not in a dropdown menu of any sort, but rather as a grid or in a circle of images with certain Jquery-UI effects upon click. The collection_select currently looks like this:

    <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>
      <%= collection_select :prelationship, :pfollower_id, Plant.all, :id,   
                            :group, {},:multiple => true,
                            :class => "listselect" %>
      <%= hidden_field_tag :project_id, @project.id %>
    <div class="actions">
      <%= f.submit "Pfollow" %>
    </div>
   <% end %> 

What I can’t figure out now is: what’s the best way to feature these plant images on my page and pass the selected plants on to the controller? I’ve been toying with four different approaches:

a) Build off a Jquery-UI Plugin like the ‘Simple Photo Manager’ or ‘Selectable-Display as Grid’ and then try to capture the li class of “ui.selected.” But if I do this, I have no idea how to pass the class of the selected object back into the collection_select, and I haven’t found a good solution online.

b) Use the html options block in collection_select to create an image select with some added Jquery <– is that even possible? I can’t find any documentation on doing this or a good plugin.

c) Feature each plant image as a unique object on the select page without collection_select and make each plant image its own “form_for image_tag” that creates the appropriate relationship instantly upon click with Ajax <– again, I’m not sure if this is possible

d) Similar to (c), make each plant image its own unique object and then when clicked, capture the ui.selected and pass it to form_for helper like this one:

    <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %> 

but, again, I can’t figure out how I can pass the selected image into a :pfollowed_id that the form_for helper could use to pass to the controller.

Thanks in advance!

In the end, my code actually looked like this. Still have to play with the CSS and Jquery:

   <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>
     <%  Plant.all.each do |plant| %>
       <%= label_tag "prelationship[pfollower_id][]", plant.name %>
       <%= check_box_tag "prelationship[pfollower_id][]", plant.id %>
     <% end %>  
   <%= hidden_field_tag :project_id, @project.id %>
   <%= f.submit "Pfollow" %>
   <% end %> 

Answer 1

There may be a lot of UI-magic you could possibly implement using Jquery etc, but I’ll suggest a simple way to replace drop downs with check-boxes –

<%= form_for(prelationship) do |f| %>
  <%  Plant.all.each do |plant| %>
    <%= label_tag plant.name %>
    <%= check_box_tag "prelationship[pfollower_ids]" %>
  <% end %>
<%= end %>

This code creates a checkbox and a corresponding label for each of the plants, and when the form is posted, params[:prelationship][:pfollower_ids] contains a list of all the pfollower_ids

To enhance the UI further, you can replace the label with an image_tag, and add some Js to check/uncheck the corresponding checkboxes every-time the image label is clicked. Then, maybe if you want to remove checkboxes, you can hide them with css, or use hidden_field_tag to remove them entirely.