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">×</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-リンクとフォーム/ http://mrdanadams.com/2011/partials-ajax-form-submit-rails/#.UVDJuuC8K00
ページをリロードせずにフォーム、送信、および非表示のモーダル ビューを含む Bootstrap モーダル ビューを備えた Rails アプリ
Twitter Bootstrap モーダル ウィンドウに Rails フォーム ヘルパーが含まれている場合にエラーを表示する
レール上のブートストラップを使用した「モーダルフォーム」は部分的に機能します
Railsでフォームを送信した後、ブートストラップモーダルが閉じない
Rails 3.1 と Twitter の Bootstrap モーダルはうまく動作しませんか?
残念ながら、これらのページのアドバイスをアプリに適用する方法がわかりません。私は Rails とプログラミング全般に不慣れで、これが AJAX または JSON への最初の進出です。