Rails form_for Twitter Twitter Bootstrap Modal with AJAX/JSON

Question

我无法让Rails form_for表单在Bootstrap模式下工作并使用AJAX更新表格。我按照指南http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html，无济于事。我也试着按照这个问题底部的链接提供建议。

在索引视图中，我有一个驱动程序表和一个用于添加新驱动程序的按钮。该按钮会为新驱动程序提供一个表单。提交表单时，我希望模式关闭，新驱动程序以字母顺序显示在驱动程序表中。现在发生的事情是模式出现并显示窗体，但单击提交按钮什么也不做。模式不会关闭，新的驱动程序不会添加到数据库中。

这里的应用程序/视图/司机/ 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> 

这里的模式部分在应用程序/视图/司机/ _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-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?

不幸的是我只是不知道如何在寿申请的建议se页面到我的应用程序。我是Rails和编程的新手，这是我第一次进入AJAX或JSON。

Answer 1

看来你对Rails来说很新。就你而言，我建议你在提交表单时阅读日志文件。并且还需要记录params [：driver]来查看是否所有字段都在那里，然后观察模态中的验证。将driver.errors.inspect放在driver.save后面，看看验证是否是原因。

总结一下：如果有一个请求提交到您创建控制器

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

然后你很高兴去看看所有的错误。

哦，我建议你看RailsCast，他们在那里得到了一切。