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