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 

這樣，你有一個單一的模式，您可以使用所有用戶。

- 編輯如何打開模式---

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