Question

我遇到一个奇怪的问题，即ajax表单提交两次。

# view  
<%= simple_form_for user, remote: true do |f| %>
  <%= f.input :approved,
    as: :boolean,
    input_html: { class: 'submit-on-select' } %>
  <%= f.submit %>
<% end %>

# js
$("input:checkbox.submit-on-select").each ->
  $(this).closest('form').find('input[type="submit"]').each ->
    $(this).addClass('hidden')
  $("input:checkbox.submit-on-select").on 'change', ->
    $form = $(this).closest('form')
    $form.submit()

点击该复选框即可提交表单，但日志显示双重提交，每次提交都会更改approved

Started PATCH "/en/users/23" for 127.0.0.1 at 2017-01-13 07:25:40 +0700
Processing by UsersController#update as JS
  Parameters: {"utf8"=>"✓", "user"=>{"approved"=>"0"}, "locale"=>"en", "id"=>"23"}
Started PATCH "/en/users/23" for 127.0.0.1 at 2017-01-13 07:25:40 +0700
Processing by UsersController#update as JS
  Parameters: {"utf8"=>"✓", "user"=>{"approved"=>"1"}, "locale"=>"en", "id"=>"23"}

我已尝试更改JS，如下所示，但双重帖子仍在继续：

...
$form.unbind('submit').submit()

我正在尝试追踪导致双重帖子的原因。在Chrome开发人员面板中，网络标签显示两个帖子事件，但它们在启动器列中都具有完全相同的跟踪。

什么可能导致这个双重帖子，什么是一个合理的调试方法？

Answer 1

尝试在return false之后或之下添加$form.submit()或使用preventDefault()

Answer 2

如果这有助于其他人遇到此问题，我最终将问题追溯到Swicthery，这些复选框已启用。

具体来说，这个页面帮助解决了这个问题。

https://github.com/abpetkov/switchery/issues/50

Simpleform将复选框包装在标签标签

中

<label><input type="checkbox"></label>

由于某种原因导致这个双重发布。

由于我想保持simpleform添加boolean_style: :inline删除了标签标签，所有现在都正常工作。

为什么ajax表单在复选框更改时提交两次？

2 个答案: