将 jQuery UI 中的选定元素传递给 Rails controller

Question

I am using Rails 3. A Map has and belongs to many Collection s, 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;
});

Answer 2

Serializing everything to a hidden INPUT is a good option. If you don't like that one an (arguably) cleaner approach would be to just make an AJAX call to your controller; this could even be part of a select event handler on your selectable. This could then serialize the selected items (which I think you even get as an argument to the selection event, but I forget exactly and am too lazy too look it up) in to the POST (or GET or PUT) data of your AJAX call.