Rails 4：如何让Sweet Alert确认框起作用？

Question

我是一个Rails的初学者，想要使用Sweet Alert来替换删除记录时基本丑陋的确认信息。我已经在我的Gemfile中添加了sweet-alert和sweet-alert-confirm gem，并按照他们的Read Me所说做了，但它不起作用，我可以删除记录，但没有任何确认消息。

Gemfile

...
gem 'sweet-alert'
gem 'sweet-alert-confirm'
...

Application.jssupported指令。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require sweet-alert
//= require sweet-alert-confirm     
//= require_tree .

stylesheet.css

/*
 ...

 *= require_self
 *= require sweet-alert
 *= require_tree .
 */

index.html.erb

...
<%= link_to 'Destroy', ice_cream, method: :delete, data: { confirm: 'Are you sure?' } %>
...

另外，有一些事情我不确定是否值得提及，当我打开Firebug时，我发现了以下错误。

希望你能帮助我，谢谢。

- Moataz Zaitoun

---

我不知道这些投票否决问题的人有什么问题，甚至没有解释为什么要这样做。伙计们，我遇到了麻烦，希望得到帮助而不是被评判！ - Moataz Zaitoun

Answer 1

感谢社区的大力帮助！但是我还是自己找到了答案...

看起来sweetalert宝石存在问题，所以...

1. I uninstalled it using

   gem uninstall sweetalert
   

2. I installed sweetalert2 using Rails Assets Web Site By Adding the following line to my Gemfile

   gem 'rails-assets-sweetalert2', source: 'https://rails-assets.org'
   

3. Run bundle

4. Rearrange application.js this way

   //= require sweetalert2
   //= require jquery
   //= require jquery_ujs
   //= require turbolinks
   //= require jquery.turbolinks
   //= require bootstrap-sprockets
   //= require sweet-alert-confirm
   //= require_tree .
   

5. Rearrange application.css this way

    *= require_self
    *= require sweetalert2
    *= require_tree .
    */
   

我保留了sweet-alert-confirm宝石，一切都正常。现在，每当我尝试删除记录而没有添加任何代码时，我会收到这个甜蜜的消息...

注意：在您投票之前，请解释为什么要对问题进行投反对票。

- Moataz Zaitoun

Answer 2

我不太确定为什么你的问题被投票否决，但几天前我遇到了同样的问题。

以下是一种不使用gems的解决方案。

1. 下载Sweet Alerts 2文件并添加到asset中，这将允许您使用sweetAlert或swal函数创建警报。

如上所述，您将需要编写自己的事件处理程序以进行确认提示，并且需要相当多的工作，因为它们是POST和DELETE请求。

2. 对于此类请求，您可以使用此JavaScript代码来覆盖allowAction方法。答案改编自：http://thelazylog.com/custom-dialog-for-data-confirm-in-rails/

在application.js或任何js文件中：

//Override the default confirm dialog by rails
$.rails.allowAction = function(link){
  if (link.data("confirm") == undefined){
    return true;
  }
  $.rails.showConfirmationDialog(link);
  return false;
}

//User click confirm button
$.rails.confirmed = function(link){
  link.data("confirm", null);
  link.trigger("click.rails");
}

//Display the confirmation dialog
$.rails.showConfirmationDialog = function(link){
  var message = link.data("confirm");
  swal({
    title: message,
    type: 'warning',
    confirmButtonText: 'Sure',
    confirmButtonColor: '#2acbb3',
    showCancelButton: true
  }).then(function(e){
    $.rails.confirmed(link);
  });
};

我曾尝试使用宝石（Ruby Gems），但对我来说并没有起作用。

- Ariff

Answer 3

我正在使用TurboLinks 5，除了这个方法以外，其他提供的解决方案都没有效果。可能不是最干净的解决方案，但它有效...

使用sweetalert2 gem，在你的application.js文件中添加以下内容。

//Override the default confirm dialog by rails
$.rails.allowAction = function(link){
  if (link.data("confirm") == undefined){
    return true;
  }
  $.rails.showConfirmationDialog(link);
  return false;
}

//User click confirm button
$.rails.confirmed = function(link){
  link.data("confirm", null);
  Turbolinks.visit(link.attr('href'))
}

//Display the confirmation dialog
$.rails.showConfirmationDialog = function(link){
  var message = link.data("confirm");
  swal({
    title: message,
    type: 'warning',
    confirmButtonText: 'Continue',
    confirmButtonColor: '#0A6EFF',
    showCancelButton: true
  }).then(function(e){
    $.rails.confirmed(link);
  });
};

- S.Kovash

Answer 4

• 将以下内容添加到您的Gemfile中：

  gem 'sweetalert-rails'

• 将以下内容添加到您的assets/javascripts/application.js中

  //= require sweet-alert

• 将以下内容添加到您的assets/stylesheets/application.css中

  *= require sweet-alert

• 在您的erb文件中添加此行

  "sweet(#{params[:id]}, 'Are you sure you want to delete?’, ‘#{posts_path(params[:id])}', 'Remove All')", :class=> "delete-all red-text" %>

在js文件中添加此代码

通过传递适当的参数，此代码可用于项目中的所有警报。

function sweet(id, text, href, button_text) {
  timer: 4000
  swal({
    title: "Warning!",
    text: text,
    showCancelButton: true,
    confirmButtonColor: "#FF6633",
    confirmButtonText: button_text,
    cancelButtonText: "Cancel",
    closeOnConfirm: true,
    closeOnCancel: true },
    function(isConfirm) {
    if (isConfirm)
    {
      location.href = href;
    }
  });
}

- anjana raveendra

Answer 5

// application.js (rails 6, without jquery using sweetalert2)

import Rails from "@rails/ujs"

let __SkipConfirmation = false;

Rails.confirm = function (message, element) {
  if (__SkipConfirmation) {
    return true;
  }
  function onConfirm() {
    __SkipConfirmation = true
    element.click()
    __SkipConfirmation = false
  }
  Swal.fire({
    title: message,
    showCancelButton: true,
    confirmButtonText: 'Go',
  }).then((result) => {
    if (result.isConfirmed) {
      onConfirm();
    }
  })
  return false;
};

- Paul Werther

---

请考虑在您的答案中添加更多注释，以便用户更好地理解您是如何回答问题的。 - Aurovrata

Answer 6

我没有成功地使用上述任何解决方案。（Rails 5，Turbolinks 5）。

最终，对我有用的是添加以下CoffeeScript：

ready = ->
    $('[data-sweet-alert-confirm]').on 'click', sweetAlertConfirm
$(document).ready(ready)
$(document).on('page:load', ready)

- Jonatan R