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 collections, , vice-versa.

what there ...

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.

what need ...

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

Popular posts from this blog

iphone - Dismissing a UIAlertView -

intellij idea - Update external libraries with intelij and java -

javascript - send data from a new window to previous window in php -