CODEWITHSUNDEEP
ajaxjsonruby-on-rails-3twitter-bootstrap
grandinero
grandinero

Reputation: 1225

Rails form_for in Twitter Bootstrap Modal with AJAX/JSON

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

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">&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>"

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.

Upvotes: 2

Views: 4858

Answers (1)

Thaichor Seng
Thaichor Seng

Reputation: 105

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:

  1. Check log if there is an submit request to your create controller.
  2. output all params to see everything is submitted as expected.
  3. 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.

Upvotes: 1

Related Questions