表单提交两次，原因是：remote =＆gt; true

Question

我的表单提交两次，经过双重检查，原因是'：remote =＆gt; true'。我删除它，我的项目运作良好。谁能告诉我为什么？以及如何使用'：remote =＆gt; true'？

我的红宝石代码：

<%= form_tag(admin_product_group_product_scopes_path(@product_group), :remote => true, :id => 'new_product_group_form') do %>
    <%
    options =
    grouped_options_for_select(
    Scopes::Product::SCOPES.map do |group_name, scopes|
      [
        t(:name, :scope => [:product_scopes, :groups, group_name]),
        scopes.keys.map do |scope_name|
          [ t(:name, :scope => [:product_scopes, :scopes, scope_name]), scope_name]
        end
      ]
    end
    )
    %>
    <p>
      <label for="product_scope_name"><%= t('add_scope') %></label>
      <%= select_tag("product_scope[name]", options) %>
      <input type="submit" value="<%= t('add') %>" />
    </p>
  <% end %>

浏览器中的最终html代码。

 <form accept-charset="UTF-8" action="/admin/product_groups/17/product_scopes" data-remote="true" id="new_product_group_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="GocX/l4ZNgF/feKtzC8FuohebM2k5MuIHtdeGp2Oi0A="></div>
    <p>
      <label for="product_scope_name">Add a scope</label>
      <select id="product_scope_name" name="product_scope[name]"><optgroup label="Taxon"><option value="taxons_name_eq">In Taxon(without descendants)</option>
<option value="in_taxons">In taxons and all their descendants</option></optgroup><optgroup label="Text search"><option value="in_name">Product name have following</option>
<option value="in_name_or_keywords">Product name or meta keywords have following</option>
<option value="in_name_or_description">Product name or description have following</option>
<option value="with_ids">Products with IDs</option></optgroup><optgroup label="Values"><option value="with">With value</option>
<option value="with_property">With property</option>
<option value="with_property_value">With property value</option>
<option value="with_option">With option</option>
<option value="with_option_value">With option and value</option></optgroup><optgroup label="Price"><option value="price_between">Price between</option>
<option value="master_price_lte">Master price lesser or equal to</option>
<option value="master_price_gte">Master price greater or equal to</option></optgroup></select>
      <input type="submit" value="Add">
    </p>
</form>

Answer 1

如果人们像我一样绊倒这个问题：

我遇到了同样的问题，并且sannankhalid的答案没有修复它，但删除了public/assets目录中的本地预编译的application.js - ujs被包含两次，因此它会触发两次。通过https://stackoverflow.com/a/9627690/604093

Answer 2

在Rails 5上，rails-ujs取代jquery_ujs。如果两者都需要，事件将触发两次。

// app/assets/javascripts/application.js
//= require jquery_ujs <-- delete this
//= require rails-ujs

Answer 3

我假设您正在使用jquery。这通常发生在呼叫不完整或存在某种错误并且您没有刷新页面时。尝试这样的事情：

<script type="text/javascript">
$('#new_product_group_form').submit(function() {
                    $(this).unbind('submit').submit();
       });
</script>

Answer 4

似乎Ryan Muller的回答是正确的。但是根据我的观点，删除application.js并不是正确的方法。我所做的是我用chrome打开了开发人员的工具，然后点击网络部分。现在，当我点击提交按钮时，它会告诉我谁在提出请求。所以我删除了那个JS并再次尝试它并且它有效。因此，根据Ryan Muller的说法，正确认为JS的问题包括两次。但请确保您也保持JS的依赖性。

Answer 5

尝试在服务器上ctrl-c停止它。然后rm -r public/assets/摆脱资产目录（和重复的application.js）。从同一终端窗口重新启动服务器，它可能会按预期工作。

Answer 6

希望为此添加另一个可能的原因。对我来说，它使用的是Mixpanel的api。具体来说是https://mixpanel.com/docs/integration-libraries/javascript-full-api#track_forms

看来，将:remote=> true与mixpanel.track_forms结合使用会导致表单在所需的json之后通过普通的html提交。

这可能很少见，但我花了一段时间追查。

Answer 7

这是HAML相当于sannankhalid的。

:javascript
  = f.submit(function() {
    $(this).unbind('submit').submit();
  });

我有Rails 4和Bootstrap 3（w / jQuery）的双POST问题，从模态提交表单更新。

Answer 8

在您的应用程序模板中（或者保留＆lt;％= javascript_include_tag“应用程序”％＆gt;标记或haml等效项的任何地方，添加“data-turbolinks-track”=＆gt; true标志，因此标记现在将如下所示：＆lt;％= javascript_include_tag“application”，“data-turbolinks-track”=＆gt; true％＆gt;。

Answer 9

一旦解决方案是删除Google代码管理器，我就碰巧了，因为我正在跟踪表单提交。

<!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQZJ2T"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-PQZJ2T');</script>

Answer 10

在大多数情况下，此问题是由jquery_ujs或rails_ujs被多次包含引起的。

请参阅有关https://github.com/rails/jquery-ujs/issues/208

的讨论