Ajax 创建重复的表单，直到页面重新加载

Question

我有一个简单的表单出现在索引页面的底部，使用 Ajax 提交表单并重新加载索引列表。出于某种原因，当取消表单或在站点上的页面之间切换并再次打开表单时，会创建重复项。我认为每次您转到网站上的新页面时都会复制表单，因为取消只会再次重定向回索引页面。我在具有相同问题的不同页面上也有相同的 ajax 表单设置。

这发生在使用 Foundation 的 Rails 4 应用程序中

index.html.erb：

<p id="notice"><%= notice %></p>

<h1>Listing Scope Times</h1>

<table>
  <thead>
    <tr>
      <th>Job</th>
      <th>Scope</th>
      <th>Week</th>
      <th>Hours</th>
      <th>Completion Rate</th>
      <th colspan="1"></th>
    </tr>
  </thead>

  <%= render "scope_times/times_list.html.erb" %>
</table>

<br>

<%= link_to(new_scope_time_path, id: 'new_scope_time_link', class: 'button tiny radius', remote: true) do %>
  Add New Scope Time Now
<% end %>

<br>

_new_scope_time_form.html.erb：

<%= simple_form_for @scope_time, html: { :class => 'form-horizontal' }, remote: true do |f| %>
    <%= f.input :completion_rate, label: "% Completed", input_html: { :class => "avg"} %>
    <%= f.input :hours, label: "Hours", input_html: { :class => "avg"} %>
    <%= f.input :week, as: :date, label: "Week", input_html: { :class => "avg"} %>
    <%= f.association :scope, collection: Scope.all,:label_method => lambda { |scope| "#{scope.job.name} | #{scope.description}" }, label: "Scope", input_html: { :class => "avg"} %>
    <p>&nbsp</p>
    <div class="form_actions">
        <%= f.submit nil, class: 'button tiny radius' %>
        <%= link_to 'Cancel', scope_times_path, class: 'button tiny radius alert' %>
    </div>
<% end %>

new.js.erb：

$('#new_scope_time_link').hide().after('<%= j render("new_scope_time_form") %>');

create.js.erb：

$('#new_scope_time').remove();
$('#new_scope_time_link').show();
$('#times_list').replaceWith('<%= j render("scope_times/times_list") %>');

刷新页面可以解决问题，即使点击返回同一页面的链接也不会。知道为什么会这样吗？

Answer 1

记住几件事：-

1) -> 在定义 render partila: '' 时使用局部变量和局部名称不应该包含 .html.erb 的好习惯

假设@scopes 包含范围列表，并在index 操作中定义 它应该是

<%= render "scope_times/times_list", scopes: @scopes %>

2) -> 为 _add_new_scope_link.html.erb 创建一个部分

  <%= link_to(new_scope_time_path, id: 'new_scope_time_link', class: 'button tiny radius', remote: true) do %>
  Add New Scope Time Now
  <% end %>

Index.html.erb

<p id="notice"><%= notice %></p>

<h1>Listing Scope Times</h1>

<table>
  <thead>
    <tr>
      <th>Job</th>
      <th>Scope</th>
      <th>Week</th>
      <th>Hours</th>
      <th>Completion Rate</th>
      <th colspan="1"></th>
    </tr>
  </thead>
  <tbody id="scope_times_lists">
    <%= render "scope_times/times_list.html.erb" %>
  </tbody>
</table>

<br>
<div id="add_new_scope_link">
  <%= render 'add_new_scope_link'%>
</div>

<br>

new.js.erb

#replace form and remove link
$('#new_scope_time_link').html(<%= j render 'new_scope_time_form' %>);

创建.js.erb：

$('#new_scope_time').remove(); #remove form
$('#scope_times_lists').html("<%= j render 'scope_times/times_list', scopes: @scopes %>"); #refresh scopes lists including new created list
$('#add_new_scope_link').html("<%= j render 'add_new_scope_link'%>"); #add link again to create new form