Rails Form_for 许多对象的模态

Question

如果有更好的方式来表达问题，或者更好的方式来做到这一点，请告诉我。

我想使用模态 form_for 更新一些模型。用户单击 "edit" 和带有字段的模式弹出窗口，然后可以单击提交或取消。我可以做到这一点的一种方法是为每个模型创建一个模态，但这似乎是错误的，并且确实会增加 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 通过将 remote: true 添加到 link 并使用 data-toggle 和 data-target 将其与模式对话框相关联，从而在您的控制器中点击一个动作。

  <%= 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 的 class 标识的那些部分）对于模态框的正确显示很重要。

现在您只需渲染并填充 div 作为对 AJAX 调用的响应，因此创建一个 js.erb（例如，编辑。js.erb）为您的控制器操作创建文件并向其中添加以下内容。

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

最后确保您从控制器渲染 js：

  format.js

Rails Form_for 许多对象的模态

Rails Form_for in modal for many objects

javascript

ruby-on-rails

modal-dialog

form-for