如何在远程表单上禁用提交按钮,直到加载下一页

Question

在使用Turbolinks的Rails 5.1应用程序中,我data-disable-with在我的提交按钮中添加了一个属性,因此在单击时,该按钮将被禁用,以防止意外多次提交数据.这在许多情况下都很有用.

问题是,在使用内置的UJS帮助程序(data-remote=true)通过AJAX提交的表单上,单击提交按钮时,它不会保持禁用状态.它最初被禁用,但在下一页加载之前会快速重新启用.这违背了data-disable-with行为的要点,因为它使意外的表格重新提交.

有没有办法在加载新页面之前保持表单按钮被禁用？

这是表格:

<%= simple_form_for(
  resource,
  as: resource_name,
  url: session_path(resource_name),
  html: { class: "large", autocomplete: "on" },
  remote: true
) do |f| %>
  <%= f.input(
    :email,
    placeholder: "Email address",
    label: false,
    autofocus: true
  ) %>
  <%= f.input(:password, placeholder: "Password", label: false) %>
  <%= f.button(
    :submit,
    "Sign in",
    class: "ui fluid large teal submit button",
    "data-disable-with": "Signing in..."
  ) %>
<% end %>

这是发生了什么.

Answer 1

怎么了？

1. 表格已提交
2. rails-ujs禁用按钮(data-disable-with行为)
3. 表单请求成功
4. rails-ujs重新启用按钮
5. turbolinks-rails向重定向位置发出请求(可能是一个缓慢的位置,使按钮处于启用状态)

解

我们需要在步骤4之后重新禁用该按钮.为此,我们将监听该ajax:success事件,并使用它来禁用它setTimeout.这确保了在 Rails完成它之后它将被禁用.(您可以使用requestAnimationFrame而不是setTimeout,但它没有得到广泛支持.)

为了防止按钮被缓存在禁用状态,我们将在缓存之前重新启用它.(注意使用one而不是on防止before-cache处理程序执行多次.)

我注意到你使用的是jQuery和jquery-ujs,所以我将在下面的代码中使用这些库中的函数.将其包含在主JavaScript文件中的某处.

jQuery的UJS

;(function () {
  var $doc = $(document)

  $doc.on('submit', 'form[data-remote=true]', function () {
    var $form = $(this)
    var $button = $form.find('[data-disable-with]')
    if (!$button.length) return

    $form.on('ajax:complete', function () {
      // Use setTimeout to prevent race-condition when Rails re-enables the button
      setTimeout(function () {
        $.rails.disableFormElement($button)
      }, 0)
    })

    // Prevent button from being cached in disabled state
    $doc.one('turbolinks:before-cache', function () {
      $.rails.enableFormElement($button)
    })
  })
})()

rails-ujs/jQuery

;(function () {
  var $doc = $(document)

  $doc.on('ajax:send', 'form[data-remote=true]', function () {
    var $form = $(this)
    var $button = $form.find('[data-disable-with]')
    if (!$button.length) return

    $form.on('ajax:complete', function () {
      // Use setTimeout to prevent race-condition when Rails re-enables the button
      setTimeout(function () {
        $button.each(function () { Rails.disableElement(this) })
      }, 0)
    })

    // Prevent button from being cached in disabled state
    $doc.one('turbolinks:before-cache', function () {
      $button.each(function () { Rails.enableElement(this) })
    })
  })
})()

rails-ujs/vanilla JS

Rails.delegate(document, 'form[data-remote=true]', 'ajax:send', function (event) {
  var form = event.target
  var buttons = form.querySelectorAll('[data-disable-with]')
  if (!buttons.length) return

  function disableButtons () {
    buttons.forEach(function (button) { Rails.disableElement(button) })
  }

  function enableButtons () {
    buttons.forEach(function (button) { Rails.enableElement(button) })
  }

  function beforeCache () {
    enableButtons()
    document.removeEventListener('turbolinks:before-cache', beforeCache)
  }

  form.addEventListener('ajax:complete', function () {
    // Use setTimeout to prevent race-condition when Rails re-enables the button
    setTimeout(disableButtons, 0)
  })

  // Prevent button from being cached in disabled state
  document.addEventListener('turbolinks:before-cache', beforeCache)
})

请注意,这将禁用按钮,直到下一页data-remote使用data-disable-with按钮加载所有表单.您可能希望更改jQuery选择器以仅将此行为添加到选定的表单.

希望有所帮助!