首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Rails5.1:如何覆盖rails-ujs中的allowAction以使用自定义确认对话框

Rails5.1:如何覆盖rails-ujs中的allowAction以使用自定义确认对话框
EN

Stack Overflow用户
提问于 2017-08-29 00:51:36
回答 3查看 2.2K关注 0票数 3

在使用jquery_ujs的Rails 5.1之前的版本中,我们可以通过覆盖$.rails.allowAction来替换浏览器的确认弹出窗口,正如here所解释的那样。

从使用rails-ujs的Rails 5.1+开始,$.rails.allowAction不再可用。在Rails5中,我们如何用自己的确认覆盖Rails的默认确认,而不必切换回jquery_ujs

提前谢谢。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-12-02 23:25:51

我也遇到了同样的挑战,我对此进行了更深入的研究。我一路上发现的东西可以在这里读到:https://medium.com/store2be-tech/how-to-use-sweetalert2-for-your-rails-5-1-rails-ujs-confirms-without-jquery-8a5b516b2a1

下面是最终的解决方案:

代码语言:javascript
复制
(function() {
  var handleConfirm = function(element) {
    if (!allowAction(this)) {
      Rails.stopEverything(element)
    }
  }

  var allowAction = function(element) {
    if (element.getAttribute('data-confirm-swal') === null) {
      return true
    }

    showConfirmationDialog(element)
    return false
  }

  // Display the confirmation dialog
  var showConfirmationDialog = function(element) {
    var message = element.getAttribute('data-confirm-swal')
    var text = element.getAttribute('data-text')

    swal({
      title: message || 'Are you sure?',
      text: text || '',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes',
      cancelButtonText: 'Cancel',
    }).then(function(result) {
      confirmed(element, result)
    })
  }

  var confirmed = function(element, result) {
    if (result.value) {
      // User clicked confirm button
      element.removeAttribute('data-confirm-swal')
      element.click()
    }
  }

  // Hook the event before the other rails events so it works togeter
  // with `method: :delete`.
  // See https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/start.coffee#L69
  document.addEventListener('rails:attachBindings', function(e) {
    Rails.delegate(document, 'a[data-confirm-swal]', 'click', handleConfirm)
  })

}).call(this)
票数 4
EN

Stack Overflow用户

发布于 2017-11-10 20:47:31

我还没有找到一个很好的方法来调整到rails_ujs中,所以我使用了这个变通方法(使用CoffeeScript):

代码语言:javascript
复制
```javascript

$(文档).on 'mousedown',‘adata confirm’,(e) ->

e.preventDefault()

链接= $(e.target)

message = link.data‘确认’

modal = $('.modal.confirmation')

Modal.find(‘.content’)消息(.text)

approve = modal.find('.approve')

approve.attr('data-method',link.data('method'))

approve.attr('href',link.attr('href'))

modal.modal('show')

代码语言:javascript
复制

Mousedown事件允许首先执行我的事件处理程序(它位于rails_ujs使用的click事件之前)

票数 2
EN

Stack Overflow用户

发布于 2019-03-30 09:14:28

您可以使用Rails.confirm覆盖它,例如使用CoffeeScript:

代码语言:javascript
复制
Rails.confirm = (message, element) ->
  # your code

例如,让确认文本显示2秒钟:

代码语言:javascript
复制
WAITING_CLASS = "waiting-for-confirmation"
TIMEOUT = 2000

Rails.confirm = (message, element) ->
  if element.classList.contains(WAITING_CLASS)
    true
  else
    element.dataset.beforeConfirm = element.textContent
    element.textContent = element.dataset.confirm
    element.classList.add(WAITING_CLASS)

    timeout TIMEOUT, ->
      element.classList.remove(WAITING_CLASS)
      element.textContent = element.dataset.beforeConfirm

    false

请参阅:https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/features/confirm.coffee

timeout,以及一个简单的倒置setTimeout参数的函数:

代码语言:javascript
复制
var timeout = function(time, callback) {
  setTimeout(callback, time)
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45923864

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档