?
-
- 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 () {
setTimeout(function () {
$.rails.disableFormElement($button)
}, 0)
})
$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 () {
setTimeout(function () {
$button.each(function () { Rails.disableElement(this) })
}, 0)
})
$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 () {
setTimeout(disableButtons, 0)
})
document.addEventListener('turbolinks:before-cache', beforeCache)
})
, data-remote
data-disable-with
. jQuery, .
, !