Bootstrap Modal не работает должным образом с моей логикой Rails

Question

У меня возникли проблемы с правильной работой моего блока выбора внутри моего загрузочного мода.

Я использую Rails 4 и Bootstrap 3 и довольно много вопросов.

1. Когда я нажимаю на моем «Присвоить» button моего modal открывает несколько раз в зависимости от того, сколько записей я в настоящее время на этой странице. (Ex.I должна нажать отменить 3 раза, чтобы закрыть мою модальность, если У меня 3 записи в моей таблице) Я, очевидно, просто хочу, чтобы мой модал открывался один раз.

2. Когда я выбираю «менеджер» из f.select выпадающего списка, а затем нажмите кнопку «Назначить» он изменяет менеджер поля 1-й записи, а не текущей записи я пытаюсь назначить. (Если у меня есть 3 записи и нажмите «Присвоить на третьей записи», он обновит поле менеджера 1-й записи).

Вот некоторые частичные фрагменты кода, чтобы показать, что я сделал до сих пор:

index.html.erb

<tbody> 
<% @projects.each do |project| %> 

    <tr> 
    <td><%= project.manager %></td> 
    <td><%= project.subject %></td> 
    <td><%= project.status %></td> 

    <td> 
    <% if controller.action_name == 'pending' %> 

    <button type="button" class: "btn btn-large btn-primary" data-toggle="modal" data-target=".assign-modal">Assign</button> 

    <div class="modal fade assign-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 

     <div class="modal-dialog" role="document"> 

     <div class="modal-content"> 

      <div class="modal-body"> 

       <%= render partial: 'new_assign', locals: {project: project} %> 

      </div> 
     </div> 
     </div> 
     </div> 
    </td> 
    </tr> 
    <% end %> 
    <% end %> 
</tbody> 

_new_assign.html.erb

<div class="modal header"> 
    <button type="button" class="close" data-dismiss="modal" <aria-hidden="true">x</button> 
    <h3 id="myModalLabel">Assign a Manager</h3> 
</div> 
<div class="modal-body"> 
Manager(Project Manager) 
<%= form_for(project) do |f| %> 
<%= f.select :manager, [[""],["George"],["Thomas"],["Abe"],["Bill"]] %> 
</div> 
<div class="modal-footer"> 
<%= f.submit "Assign", class: "btn btn-large btn-primary" %> 
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <% end %> 
</div> 

Answer 1

Редакция 1: Модальная функция появляется, потому что каждый цикл создает новый «скрытый» модальный, который устанавливается, когда появляется триггер. Таким образом, вам нужно изолировать каждый модальный и триггер друг к другу, присваивая каждому уникальному счету count/id. Вот как это работает:

Update каждый модальный триггер, чтобы иметь уникальный идентификатор

нужно изменить что-то вроде data-target="#modal-#{project.id}"

и модальностей себя должен сделать то же самое. Поэтому вытащите класс .assign-modal и используйте идентификаторы для каждого модального. Что-то вроде:

<div class="modal fade" id="modal-#{project.id}" tabindex="-1" role="dialog" ...

Это будет исправить несколько модальный всплывающий вопрос. На выпуск 2!

Редакция 2: Коллекция повреждена.Просто имея [[""],["George"],["Thomas"],["Abe"],["Bill"]], так как коллекция не позволяет назначить какое-либо значение для выбранного параметра. Поэтому, вероятно, было бы лучше получить хэш, созданный в контроллере, и отправить его как переменную экземпляра. Что-то вроде {1: «Джордж», 2: «Томас», 3: «Абэ» и т. Д.}, Где номера являются идентификаторами первичного ключа менеджера.

Таким образом, когда форма отправлена, она отправит параметры с помощью params[:manager_id] = value of option selected и будет очень проста в использовании, как в ассоциативном режиме. Кроме того, нам не нужно иметь пустую/дефолтную часть коллекции. Мы можем передать вариант f.select, чтобы это произошло :)

Надеюсь, это поможет!

Answer 2

Я считаю, что проблемы, которые вы видите, происходят из-за того, что вы включили модальный внутри цикла @projects. Это означает, что три записи создают три модала с тем же классом assign-modal, все отвечающие на ту же кнопку. Я думаю, что это также является причиной вашей второй проблемы; Три модальности отображаются, когда вы нажимаете кнопку для третьей записи. Тогда вы в основном меняете менеджера первой записи, так как модальность, связанная с этой записью, - та, что впереди.

Попробуйте перемещать модальный снаружи петли, желательно за пределами стола.