ajax - 带有 AJAX/JSON 的 Twitter Bootstrap 模式中的 Rails form_for

Question

我无法让 Rails form_for 表单在 Bootstrap 模式中工作并使用 AJAX 更新表。我遵循了http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html上的指南，但无济于事。我还尝试按照此问题底部链接中的建议进行操作。

在索引视图上，我有一个驱动程序表和一个添加新驱动程序的按钮。该按钮会显示带有新驱动程序表单的模式。提交表单后，我希望模式关闭并且新驱动程序按字母顺序出现在驱动程序表中。现在发生的情况是模式出现并显示表单，但单击提交按钮什么也不做。模态不会关闭，并且新驱动程序不会添加到数据库中。

以下是app/views/drivers/index.html.erb的摘要：

<div>
  <a href="#driverAddModal", role="button", class="btn btn-medium btn-primary", data-toggle="modal">Add Driver</a>
  <%= render 'new_driver' %>
</div>
<div>
  <table id="drivers" class="table table-hover"> 
    <thead>
      <%= render 'list_header' %>
    </thead>
    <tbody>
      <%= render @drivers.sort_by(&:last_name) %>
    </tbody>
  </table>
</div>

这是app/views/drivers/_new_driver.html.erb的模态部分：

<div id="driverAddModal", class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="driverAddModalLabel">Add Driver</h3>
  </div>
  <div class="modal-body"> 
    <%= form_for @driver, remote: true do |f| %>
      Last Name
      <%= f.text_field :last_name %>
      <!--more form fields-->
      <%= f.submit "Add Driver", class: "btn btn-large btn-primary" %>
    <% end %> 
  </div>
</div>

应用程序/控制器/drivers_controller.rb：

class DriversController < ApplicationController
  def new
    @driver = Driver.new
  end

  def create
    @driver = Driver.new(params[:driver])

    respond_to do |format|
      if @driver.save
        format.html { redirect_to @driver, notice: 'Driver added.' }
        format.js   {}
        format.json { render json: @driver, status: :created, location: @driver }
      else
        format.html { render action: "new" }
        format.json { render json: @driver.errors, status: :unprocessable_entity }
      end
    end
  end

  def index
    @driver = Driver.new
    @drivers = Driver.all
    respond_to do |format|
      format.html
    end
  end
end

应用程序/视图/驱动程序/create.js.erb：

$("<%= escape_javascript(render @driver) %>").appendTo("#drivers");

应用程序/资产/javascript/drivers.js.coffee：

$(document).ready ->
  $("#new_driver").on("ajax:success", (e, data, status, xhr) ->
    $("#new_driver").append xhr.responseText
  ).bind "ajax:error", (e, xhr, status, error) ->
    $("#new_driver").append "<p>ERROR</p>"

以下是我检查过的其他链接：

http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/ http://www.alfajango.com/blog/rails-3-remote-链接和表单/ http://mrdanadams.com/2011/partials-ajax-form-submit-rails/#.UVDJuuC8K00

带有 Bootstrap 模态视图的 Rails 应用程序，包含表单、提交和消失模态视图，无需重新加载页面

当 Twitter Bootstrap 模式窗口包含 Rails 表单助手时显示错误

带有引导程序的“模态形式”部分工作

在 Rails 中提交表单后，引导模式不会关闭

Rails 3.1 和 Twitter Bootstrap 模式玩得不好？

不幸的是，我只是不知道如何将这些页面上的建议应用到我的应用程序中。我是 Rails 和一般编程的新手，这是我第一次涉足 AJAX 或 JSON。