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

Question

I have a button action in a grid that calls an 'Approve' action in the controller. How do I pop an intermediate form to capture a reason that will also get passed to the action?

I am using Rails 4.1 with Bootstrap. Happy to use another form, straight JS or bootstrap modals, whatever will work really - just have never been able to get this working cleanly.

route looks like:

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

controller action:

  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

example button in the view looks like this:

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

Answer 1

You change the link_to above to a button that toggles the modal:

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

And then in the modal you create a small form that passes the reason to the action (in this example, it uses reason as the parameter, which can be accessed as params[:reason] in your action:

<!-- 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 -->

This creates a modal like so: