Rails Form_For / Select с Jquery и изображениями - PullRequest
Новая
       20

Rails Form_For / Select с Jquery и изображениями

0 голосов
/ 27 февраля 2012

Я боролся с поиском лучшего подхода к этой проблеме уже более недели (да, я новичок).В моем приложении пользователи создают проекты, а затем строят отношения ("pfollow") с выбором объектов растений в моей базе данных.

До сих пор я использовал коллекцию в стиле с выпадающим плагином Jquery select под названием «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', а затем попытайтесь захватить класс li "ui.selected «.Но если я сделаю это, я не знаю, как передать класс выбранного объекта обратно в collection_select, и я не нашел в сети хорошего решения.

b) Использовать блок параметров html в collection_selectсоздать изображение, выбрав его с добавленным Jquery <- это вообще возможно?Я не могу найти документацию по этому или хорошему плагину. </p>

c) Добавьте каждое изображение растения в качестве уникального объекта на странице выбора без collection_select и сделайте каждое изображение растения своим собственным "form_for image_tag", который создаетсоответствующие отношения сразу после нажатия с Ajax <- опять же, я не уверен, возможно ли это </p>

d) Аналогично (c), сделайте каждое растение изображением своего уникального объекта, а затем при нажатии захватитеui.selected и передать его помощнику form_for следующим образом: 

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

, но, опять же, я не могу понять, как я могу передать выбранное изображение в: pfollowed_id, который может использовать помощник form_forперейти к контроллеру.

Заранее спасибо!

В итоге мой код действительно выглядел так.Еще придется поиграть с 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 %>

1 Ответ

1 голос
/ 27 февраля 2012

Может быть много 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 и добавить несколько J, чтобы отмечать / снимать соответствующие флажки при каждом нажатии метки изображения. Затем, может быть, если вы хотите удалить флажки, вы можете скрыть их с помощью css или использовать hidden_field_tag, чтобы полностью удалить их.

...