Rails form_for in Twitter Bootstrap Modal with AJAX/JSON - ajax

Question

I'm having trouble getting a Rails form_for form to work in a Bootstrap modal and update a table with AJAX. I've followed the guide at http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html, to no avail. I've also tried following the advice in the links at the bottom of this question.
On the index view, I have a table of drivers and a button to add a new driver. The button brings up the modal with a form for a new driver. When the form is submitted, I want the modal to close and the new driver to appear in alphabetical order in the drivers table. What's happening now is that the modal comes up and shows the form, but clicking the submit button does nothing. The modal does not close and the new driver is not added to the database.
Here's a summary of app/views/drivers/index.html.erb:
<div>
Add Driver
<%= 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>
Here's the modal partial at 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">×</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>"
Here are the other links I've checked out:
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?
Unfortunately I just don't know how to apply the advice on those pages to my app. I'm new to Rails and programming in general and this is my first foray into AJAX or JSON.

Answer 1

It seems like you are very new to Rails. In your case, I suggest you go and read the log files when you submit the form. And also log params[:driver] to see if all the fields are there, and watch for validation in your modal. puts driver.errors.inspect after driver.save to see if validation is the cause.
Sum up:
Check log if there is an submit request to your create controller.
output all params to see everything is submitted as expected.
output 'success' in success scope, and output driver.errors.inspect if save fail.
Then you are good to go to see all the bugs.
Oh I suggest you watch RailsCast, they got everything in there.