Question

I am using Rails 3. A Map has and belongs to many Collections, and vice-versa.

What Is already there …

I have a form that allows the user to select several maps that will go in a collection. For that, I use jQuery UI with the Selectable method in a grid.

This is how the grid is constructed:

<ol id="selectable">
<% for map in @user.maps %>
    <li class="ui-state-default">
        <strong><%= map.title %></strong><br>
        <%= image_tag(map.thumbnail_url) %>
    </li>
<% end %>
</ol>

It looks something like this:

When the user is finished selecting, the selected maps (their <li> tag) will have the class .ui-selected.

What I need …

How could I pass the controller the IDs of those selected maps in order to add them to a new collection? And what should I do in the controller? What are the best practices here?

What I thought about doing …

1. I’ve thought about writing a custom submit handler for the form, which would go through all of those li.ui-selected and somehow try to extract the IDs, then merge them into a hidden form field and finally submit the form. Then, in the controller, I’d split the hidden form field again, extract the IDs and get the Maps from the database.

2. Another way would probably be to have a collection_select, that somehow syncs with the jQuery Selectable. The collection_select I have is:

   <%= collection_select :collection, 
       :map_ids, 
       @collection.user.maps, 
       :id,
       :title, 
       { :selected => @collection.map_ids }, { :class => "map_select", :multiple => true, :size => '10', :name => 'collection[map_ids][]' }
   %>
   

Both sound a bit hacky though. Isn’t there something easier or more JS/Rails-esque?

Answer 1

Here’s what I ended up with. This is my collection_select.

<%= collection_select :collection, 
    :map_ids, 
    @collection.user.maps, 
    :id,
    :title, 
    { :selected => nil },
    { :class => "map_select hiddenElement", :multiple => true, :size => '10', :name => 'collection[map_ids][]' }

This is how my individual containers are created:

<ol id="selectable">
  <% for map in current_user.maps %>
    <% if @collection.maps.include? map %>
      <li class="singleMapContainer ui-selected">
    <% else %>
      <li class="singleMapContainer">
    <% end %>
      <div class="singleMapInfo">
        <span class="mapId" style="display:none;"><%= map.id %></span>
        <strong><%= map.title %></strong><br>
        <%= map.created_at %><br>
        <%= image_tag(map.thumbnail_url) %>
      </div>
    </li>
  <% end %>
</ol>

Here’s the Javascript that synchronizes them when the form is submitted:

$("#new_collection, .edit_collection").submit(function(){
  // iterate over each selected map container element
  $("li.ui-selected").each(function(){
    var mapId = $(this).find("span.mapId").html();  // find the map ID
    $("#collection_map_ids option[value='" + mapId + "']:first")[0].selected = true;  // synchronize the multiple select box
  });
  return true;
});