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）->在定义.html.erb时，使用带有局部和局部名称的局部变量的优良作法不应包含render partila: ''

假设@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' %>);

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

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

1 个答案: