javascript - Pass selected elements from jQuery UI Selectable to Rails controller -
javascript - Pass selected elements from jQuery UI Selectable to Rails controller -
i using rails 3. map
has , belongs many collection
s, , vice-versa.
i have form allows user select several maps go in collection. that, utilize jquery ui selectable method in grid.
this how grid constructed:
<ol id="selectable"> <% map in @user.maps %> <li class="ui-state-default"> <strong><%= map.title %></strong><br> <%= image_tag(map.thumbnail_url) %> </li> <% end %> </ol>
it looks this:
when user finished selecting, selected maps (their <li>
tag) have class .ui-selected
.
how pass controller ids of selected maps in order add together them new collection? , should in controller? best practices here?
what thought doing ...i've thought writing custom submit handler form, go through of li.ui-selected
, somehow seek extract ids, merge them hidden form field , submit form. then, in controller, i'd split hidden form field again, extract ids , maps database.
another way have collection_select
, somehow syncs jquery selectable. collection_select
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 bit hacky though. isn't there easier or more js/rails-esque?
here's ended with. 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 how individual containers created:
<ol id="selectable"> <% 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 javascript synchronizes them when form submitted:
$("#new_collection, .edit_collection").submit(function(){ // iterate on each selected map container element $("li.ui-selected").each(function(){ var mapid = $(this).find("span.mapid").html(); // find map id $("#collection_map_ids option[value='" + mapid + "']:first")[0].selected = true; // synchronize multiple select box }); homecoming true; });
javascript ruby-on-rails jquery-ui parameter-passing
Comments
Post a Comment