Question

我正在关注rails和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">&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中的部分：

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

Answer 1

所以事实证明这是一个我无法追查的小问题，问题是我在create.js.erb中引用的问题

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

需要：

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

另一个问题是我在索引文件中放置了#container_locations，我将它从表格上方的<div>移到了<tr>块中，它现在可以正常运行它在适当的地区。

Rails 5 + Ajax表没有动态表单提交

1 个答案: