如何使用 Rails 4.1 Bootstrap 获取弹出表单以将更多详细信息传递给控制器

Question

我在网格中有一个按钮操作，它在控制器中调用“批准”操作。如何弹出一个中间表单来捕获也将传递给操作的原因？

我正在使用带有 Bootstrap 的 Rails 4.1。很高兴使用另一种形式，直接的 JS 或引导模式，无论什么都可以真正起作用 - 只是从来没有能够让这个工作干净。

路线看起来像：

get 'approve_leave_request/:id' => 'leave_requests#approve', as: :approve_leave_request

控制器动作：

  def approve
    @leave_request = LeaveRequest.find(params[:id])
    @leave_request.status = "Approved"
    @leave_request.leave_request_actions.build([status: "Approved by #{current_user.name}"])
    if @leave_request.save
      flash[:success] = "Leave request has been approved."
      LeaveRequestMailer.delay.approve_leave_request(@leave_request, ActsAsTenant.current_tenant.full_domain)      
    else
      flash[:error] = "Leave request could not be approved."
    end
    redirect_to leave_requests_path
  end

视图中的示例按钮如下所示：

<%= link_to approve_leave_request_path(r), class: "btn btn-success btn-xs" do %>
    <span>Approve</span>
<% end %>

Answer 1

您将上面的link_to 更改为切换模式的按钮：

<!-- Button trigger modal -->
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#approvalModal">
  Approve
</button>

然后在模式中创建一个将原因传递给操作的小表单（在此示例中，它使用reason 作为参数，可以在您的操作中以params[:reason] 的形式访问：

<!-- Modal -->
<div class="modal fade" id="approvalModal" tabindex="-1" role="dialog" aria-labelledby="approvalModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Approval</h4>
      </div>
      <div class="modal-body">
        <%= form_tag approve_leave_request_path(r), method: :get, :class => "form-horizontal" do %>
              <%= label_tag 'reason', 'Reason for Approval', :class => 'control-label' %>
              <%= text_field_tag :reason, params[:reason], :class => "form-control" %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
           <%= submit_tag "Submit Approval", name: nil, class: "btn btn-success" %>
        <% end %>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这会创建一个像这样的模态：