Rails 4：如何获取sweet alert confirm work？

Question

我是 rails 的初学者，我想使用 Sweet Alert 来替换删除记录时丑陋的基本确认消息。我已将 sweet-alert gem and sweet-alert-confirm 添加到我的 gem 文件中我完全按照他们在自述文件中所说的进行了操作，但它不起作用，我可以删除记录但它立即被删除，没有任何确认任何类型的消息。

宝石文件

...
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时，我发现以下错误。

希望你能帮助我，谢谢。

Answer 1

感谢社区的大力帮助！，但我自己又一次找到了答案...

似乎 sweetalert gem 有问题，所以

我使用
卸载了它
```
gem uninstall sweetalert
```
我安装了 sweetalert2 using Rails Assets Web Site 通过将以下行添加到我的 Gemfile
```
gem 'rails-assets-sweetalert2', source: 'https://rails-assets.org'
```
运行捆绑

按此方式重新排列 application.js

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

按此方式重新排列 application.css

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

我保留了 sweet-alert-confirm gem，并且一切正常。现在，每当我尝试删除一条记录而不添加任何代码行时，我都会发现这条甜蜜的消息...

注意：请先解释您为什么要否决一个问题。

Answer 2

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

这是一个不使用gems 的解决方案。

下载 Sweet Alerts 2 的文件。添加文件以加载资产。这将允许您使用 sweetAlert 或 swal 函数创建警报。

如前所述，您必须为确认警报编写自己的事件处理程序，并且需要大量工作，因为它们是 POST 和 DELETE 请求。

对于此类请求，您可以使用此 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);
  });
};

曾尝试使用这些宝石，但它对我不起作用。

Answer 3

将此添加到您的 Gemfile：

gem 'sweetalert-rails'
将此添加到您的 assets/javascripts/application.js

//= 需要 sweet-alert
将此添加到您的 assets/stylesheets/application。css

*= 需要 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;
    }
  });
}

Answer 4

我正在使用 TurboLinks 5，none 所提供的解决方案对我有用，除了这个。可能不是最干净的解决方案，但它有效...

使用 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);
  });
};

Answer 5

我未能使上述任何解决方案发挥作用。（Rails 5，Turbolinks 5）。

最后，对我有用的是添加以下 coffeescript：

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

Answer 6

// 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;
};

Rails 4：如何获取sweet alert confirm work？

Rails 4: How to get sweet alert confirm work?

ruby-on-rails

sweetalert