Question

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

的Gemfile

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

Application.jssupported指令。

/*
 ...

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

stylesheet.css中

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

index.html.erb

constraints

另外，有些事情我不知道是否值得一提，当我打开萤火虫时，我发现以下错误。

希望你能帮帮我，谢谢你。

Answer 1

感谢团结一致给予了极大的帮助！但是我又一次找到了答案......

似乎sweetalert gem存在问题，所以

我使用
卸载了它
```
gem uninstall sweetalert
```
我使用sweetalert2安装了Rails Assets Web Sit e将以下行添加到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宝石，而且每件事情都很好。现在，每当我尝试删除记录而不添加任何代码行时，我都会发现这个甜蜜的消息......

注意：请先解释为什么在投票之前投票。

Answer 2

我不太清楚为什么你的问题被投票，但我几天前实际上遇到了同样的问题。

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

下载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

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

Answer 4

将此添加到您的Gemfile：

gem＆＃39; sweetalert-rails＆＃39;
将此添加到您的assets / javascripts / application.js

// =要求甜蜜警报
将此添加到您的assets / stylesheets / application.css

* =要求甜蜜警报
在您的erb文件中添加此行

＆＃34; sweet（＃{params [：id]}，＆＃39;您确定要删除吗？'，'＃{posts_path（params [：id]）}＆＃39;，＆＃39;全部删除＆＃39;）＆＃34;，：class =＆gt; ＆＃34;删除 - 所有红色文字＆＃34; ％GT;

在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 5

我没有设法让上述任何解决方案起作用。（Rails 5，Turbolinks 5）。

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

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

Rails 4：如何获得甜蜜警报确认工作？

5 个答案: