带有 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>

app/controllers/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

app/views/drivers/create.js.erb：

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

app/assets/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-links-and-forms/ http://mrdanadams.com/2011/partials-ajax-form-submit-rails/#.UVDJuuC8K00

Rails App with Bootstrap Modal View containing form, submit and disappear modal view without reloading page

Displaying errors when a Twitter Bootstrap modal window contains a Rails form helper

"modal form" with bootstrap on rails works partially

Bootstrap modal not dismissing after form submit in Rails

Rails 3.1 and Twitter Bootstrap modal don't play nice?

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

Answer 1

您似乎对 Rails 很陌生。就您而言，我建议您在提交表单时去阅读日志文件。并且还记录 params[:driver] 以查看是否所有字段都在那里，并在您的模式中观察验证。将 driver.errors.inspect 放在 driver.save 之后，看看验证是否是原因。

总结：

1. 如果有提交请求到您的创建控制器，请检查日志。
2. 输出所有参数以查看所有内容均按预期提交。
3. 在成功范围内输出'success'，如果保存失败则输出driver.errors.inspect。

那你去看看所有的bug就好了。

哦，我建议你看看 RailsCast，他们把所有东西都放在那里了。