在我使用 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 %>
最佳答案
发生了什么?
- 表单已提交
- rails-ujs 禁用按钮(
data-disable-with
行为) - 表单请求成功
- rails-ujs 重新启用按钮
- turbolinks-rails 向重定向位置发出请求(这可能很慢,使按钮处于启用状态)
解决方案
我们需要在第 4 步之后重新禁用该按钮。为此,我们将监听 ajax:success
事件,并使用 setTimeout
禁用它.这确保了它在 Rails 完成它的工作后将被禁用。 (您可以使用 requestAnimationFrame
而不是 setTimeout
,但它没有得到广泛支持。)
为了防止按钮在禁用状态下被缓存,我们将在它被缓存之前重新启用它。 (注意使用 one
而不是 on
来防止缓存前处理程序执行多次。)
我注意到您使用的是 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 选择器以仅将此行为添加到选定的表单。
希望对您有所帮助!
关于javascript - 如何在加载下一页之前保持远程表单上的提交按钮处于禁用状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46831525/