0
我正在關注Rails和AJAX的教程，以及如何提交表單並在提交表單後立即加載結果表，但我在填充項目時遇到了一些問題表格提交時。Rails 5 + Ajax表格不提交表單提交
現在，表單提交時，數據被保存並在頁面刷新後出現在表格中，但我確實需要過渡動畫和即時頁面更新。
從我玩過類似的東西到現在已經有一段時間了，所以它可能只是一個我似乎無法跟蹤的小錯誤。這裏
我的索引控制器動作是我的位置指數：
<div class="container">
<div class="row" id="container_locations">
<table class="table">
<thead>
<tr>
<th><center>Unit number</center></th>
<th><center>Street number</center></th>
<th><center>Street name</center></th>
<th><center>Quad</center></th>
<th><center>City</center></th>
<th><center>Province</center></th>
<th><center>Postal code</center></th>
<th><center>Tel number</center></th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% if @locations.present? %>
<div id="containerLocations">
<%= render @locations %>
</div>
<% else %>
<td colspan="11"><center><h5>no locations added. please add your first location now.</h5></center></td>
<% end %>
</tbody>
</table>
</div>
<%= link_to 'add office location', '#createLocation', 'data-toggle' => 'modal', :class => 'btn btn-outline-success createLocationBtn' %>
</div>
<%= render partial: 'locations/locations_form' %>
我的形式分：
<div class="modal fade" id="createLocation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= form_for(@location, remote: true) do |f| %>
<% if @location.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(location.errors.count, "error") %> prohibited this location from being saved:</h2>
<ul>
<% @location.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="row">
<div class="col">
<div class="form-group">
<%= f.label :unit_number %>
<%= f.number_field :unit_number, :class => 'form-control unitNum' %>
</div>
</div>
<div class="col">
<div class="form-group">
<%= f.label :street_number %>
<%= f.number_field :street_number, :class => 'form-control streetNum' %>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<%= f.label :street_name %>
<%= f.text_field :street_name, :class => 'form-control streetName' %>
</div>
</div>
<div class="col">
<div class="form-group">
<%= f.label :quad, 'quadrant' %>
<%= f.text_field :quad, :class => 'form-control cityQuad' %>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<%= f.label :city %>
<%= f.text_field :city, :class => 'form-control cityName' %>
</div>
</div>
<div class="col">
<div class="form-group">
<%= f.label :province %>
<%= f.text_field :province, :class => 'form-control officeProv' %>
</div>
</div>
<div class="col">
<div class="form-group">
<%= f.label :postal_code %>
<%= f.text_field :postal_code, :class => 'form-control postalCode' %>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<%= f.label :tel_number %>
<%= f.text_field :tel_number, :class => 'form-control telNumber' %>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<%= f.submit :class => 'btn btn-outline-success' %>
<% end %>
</div>
</div>
</div>
</div>
，這裏是呈現到@locations部分：
<tbody>
<tr id="location_<%= location.id %>">
<td><%= location.unit_number %></td>
<td><%= location.street_number %></td>
<td><%= location.street_name %></td>
<td><%= location.quad %></td>
<td><%= location.city %></td>
<td><%= location.province %></td>
<td><%= location.postal_code %></td>
<td><%= location.tel_number %></td>
<td><%= link_to 'Show', location %></td>
<td><%= link_to 'Edit', edit_location_path(location) %></td>
<td><%= link_to 'Destroy', location, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
</tbody>
，最後這裏是我的create.js.erb
$("#createLocation").modal('hide');
$(".unitNum").val('');
$(".streetNum").val('');
$(".streetName").val('');
$(".cityQuad").val('');
$(".cityName").val('');
$(".officeProv").val('');
$(".postalCode").val('');
$(".telNumber").val('');
$("#containerLocations").prepend('<%= j render @location %>');
$("#location_<%= @location.id %>").hide().fadeIn(3000);