Rails 5 + Ajaxテーブルがフォーム提出時にアニメ化しない

Question

レールとAJAXのチュートリアルに従っています。フォームを送信した直後にフォームを送信して結果を表に表示する方法はありますが、私のフォームを提出するときにテーブル。

フォームが送信されると、データが保存され、ページの更新後にテーブルに表示されますが、実際にはトランジションアニメーションとインスタントページの更新が必要です。

私はこのようなもので遊んでいたのでしばらくしていましたので、可能な限り追跡できないような小さなエラーです。

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

：ここ

<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">&times;</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にレンダリングしている部分である：部分

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

マイ形式：

私のインデックスのコントローラのアクションは、ここでインデックス私の場所であります

最後に私の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); 

Answer 1

だから、問題は、私は私のcreate.js.erbで

にする必要

$("#containerLocations").prepend('<%= j render @location %>'); 

参照していたものだった、これは私がダウンして追跡することができなかった小さな問題でし判明：

$("#container_locations").prepend('<%= j render @location %>'); 

を

別の問題は、インデックスファイルに#container_locationsを配置した場所で、テーブルの上の<div>から移動し、<tr>ブロックに配置され、適切な領域に配置されるようになりました。