Rails Form_for в модальном для многих объектах

Question

Если есть лучший способ сформулировать вопрос или лучше сделать это, пожалуйста, дайте мне знать.

Я хочу обновить некоторые модели, используя form_for с использованием модального. Пользователь нажимает на «редактирование» и модальное всплывающее окно с полями и может нажать «Отправить» или «отменить». Один из способов сделать это - создать модальный для каждой отдельной модели, но это кажется неправильным и действительно наполнит файл html.erb.

Как это сделать? Я предполагаю, что каким-то образом использую функцию удаленного доступа?

<div class="modal fade" id="edit-modal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content">    
      <%= simple_form_for(@rate) do |f| %> 
      <%= f.label "Rate/session" %> 

      <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %> 
      <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt, :include_blank => false %>   

      <%= f.hidden_field :uid, :value => @user.id %> 
      <%= f.submit "Update", class: "btn btn-primary" %> 
      <% end %>   
     </div> 
    </div> 
</div> 

Answer 1

То, как я получил это Осуществлено создание модального скелет в индексной странице, а затем немного JS, чтобы загрузить форму с действием контроллера в ответ на format.js с формой частичной.

<div id="user-form-edit" class="modal fade"> 
    <div class="modal-dialog modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h3>Edit User</h3> 
    </div> 
    <div class="modal-body"></div> 
    </div> 
</div> 

Затем в файле JS:

$('#user-form-edit').on("show.bs.modal", function(e) { 
    $(this).find('.modal-body').load(e.relatedTarget.dataset.url); 
}); 

В контроллере:

def edit 
    @user = User.find(params[:id]) 
    respond_to do |format| 
    format.js { render partial: "form", locals: {user: @user}} 
    end 
end 

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

- EDIT, как открыть модальное ---

<%= link_to "#", class: "btn btn-warning edit", 
    data: { 
     toggle: "modal", 
     url: edit_admin_user_path(user.id), 
     target: "#user-form-edit"} do %> 
    <i class="glyphicon glyphicon-edit glyphicon-white"></i> 
    Edit 
<% end %> 

Answer 2

Вы на правильном пути, думая об использовании функции удаленного (AJAX), для чего вы хотите достичь.

Сначала просто создать пустой DIV, который будет заполняться в конечном итоге с запросом AJAX:

<div id="edit-modal" class="modal fade" role="dialog"></div> 

Следующая изменить вашу правку ударить действия в контроллере, используя AJAX, добавив отдаленное: правда по ссылке и единомышленника это с вашим модальным диалоговым окном, использующим функцию переключения данных и данных.

<%= link_to edit_modelinstance(@modelinstance), remote: true, 'data-toggle' => 'modal', 'data-target' => '#edit-modal' do %> 

затем создать частичный, который будет содержать модальный контент, который будет добавлен в пустой DIV созданный ранее .. например, _edit.html.erb

<div class="modal-dialog"> 
     <div class="modal-content"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal Title</h3> 
     </div> 

     <div class="modal-body"> 
      <%= simple_form_for(@rate) do |f| %> 
      <%= f.label "Rate/session" %> 

      <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %> 
      <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt, :include_blank => false %>   

      <%= f.hidden_field :uid, :value => @user.id %> 
      <%= f.submit "Update", class: "btn btn-primary" %> 
      <% end %>   

      <div class="modal-footer"> 
      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> 
      <%= f.submit 'Submit', class: 'btn btn-primary' %> 
      </div> 
     </div> 
     </div> 
    </div> 

Обратите внимание на структуру DIV (те части, идентифицированные по классу modal-xxxx) важно для корректного отображения модальности.

Теперь вам нужно всего лишь визуализировать и заполнить div как ответ на вызов AJAX, поэтому создайте файл js.erb (например, edit.js.erb) для действия ваших контроллеров и добавьте к нему следующее.

$("#edit-modal").html("<%= escape_javascript(render partial: 'form') %>"); 

Наконец просто убедитесь, что вы рендеринга JS из контроллера:

format.js