Rails的Form_For /用JQuery和圖像選擇

Question

我一直在努力尋找這個問題的最佳方法一個多星期了（是的，我是一個新手）。在我的應用程序中，用戶創建項目，然後使用他們在我的數據庫中選擇的植物對象建立關係（「pfollow」）。

我一直在使用一個collection_select風格的下拉式JQuery選擇插件名爲「listselect」到現在爲止（它工作正常），但我現在想能夠以植物選擇爲特色的圖像 - 不是一個任何類型的下拉菜單，而是一個網格或一個圖像的圓圈，點擊後會產生一定的Jquery-UI效果。該collection_select目前看起來是這樣的：

<%= 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 %> 

我想不出什麼了，現在是：什麼爲特色我的網頁上，這些植物圖像，並傳遞給控制器​​選擇的植物最好的方法是什麼？我一直在玩弄四種不同的方法：

a）構建一個Jquery-UI插件，比如'Simple Photo Manager'或'Selectable-Display as Grid'，然後嘗試捕獲「ui」的li類。選擇「。但是如果我這樣做，我不知道如何將所選對象的類傳遞迴collection_select，並且我還沒有找到一個好的在線解決方案。

b）使用collection_select中的html選項塊來創建一個圖像選擇，並添加一些Jquery < - 這甚至可能嗎？我找不到任何有關做這個或一個好插件的文檔。

c）將每個植物圖像作爲選擇頁面上的獨特對象，而不需要collection_select，並使每個植物圖像具有自己的「form_for image_tag」，在用Ajax點擊後立即創建適當的關係< - 再次，我不是知道這是可能的

d）類似（C），使每個植物影像自己獨特的對象，然後點擊時，捕捉ui.selected並把它傳遞給助手的form_for像這樣的：

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

但我再次無法弄清楚如何將選定的圖像傳遞給：pfollowed_id t他可以使用form_for helper傳遞給控制器​​。

在此先感謝！

最後，我的代碼實際上看起來像這樣。還有用CSS和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

可能有很多的UI魔術你可能實現使用jQuery的等等，但我會建議一個簡單的方法，以取代的複選框下拉菜單 -

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

此代碼創建一個複選框，併爲每個設備的相應的標籤，並在表單張貼，params[:prelationship][:pfollower_ids]包含所有pfollower_ids

的列表，以進一步增強用戶界面，你可以用image_tag替換標籤，然後添加每次點擊圖像標籤時，一些Js檢查/取消選中相應的複選框。然後，也許如果你想刪除複選框，你可以用css隱藏它們，或者使用hidden_field_tag來完全刪除它們。