Rails 4：如何獲得甜蜜警報確認工作？

Question

我是 Rails 的初學者，我想使用 Sweet Alert 來替換關於刪除記錄的基本丑陋確認消息。 我已經在我的 gem 文件中添加了sweet-alert gem 和sweet-alert-confirm我已經完全按照他們在自述文件中所說的做了，但是它不起作用，我可以刪除記錄但是它立即被刪除了沒有任何類型的任何確認信息。

寶石文件

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

Application.js 支持的指令。

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

樣式表.css

/*
 ...

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

index.html.erb

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

另外，有些事情我不知道是否值得一提，當我打開螢火蟲時，我發現以下錯誤。

希望你能幫助我，謝謝。

Answer 1

感謝團結一致給予了極大的幫助！但是我又一次找到了答案......

似乎sweetalert gem存在問題，所以

1. 我用它卸載了它

    gem uninstall sweetalert 

2. 我安裝sweetalert2使用Rails的資產網頁坐 e。通過添加下面一行到我Gemfile

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

3. 運行包

4. 以這種方式重新排列application.js

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

5. 以這種方式重新排列application.css

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

我保留了sweet-alert-confirm寶石，而且每件事情都很好。 現在，每當我嘗試刪除記錄而不添加任何代碼行時，我都會發現這個甜蜜的消息...

注意：請解釋為什么在你做之前對某個問題進行投票。

Answer 2

我不太清楚為什么你的問題被投票，但幾天前我實際上遇到了同樣的問題。

這是一個不使用寶石的解決方案。

1. 下載Sweet Alerts的文件2.添加要加載資產的文件。 這將允許您使用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);
  });
};

曾嘗試過寶石，但它對我不起作用。

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：

  寶石'sweetalert-rails'

• 將其添加到您的assets / javascripts / application.js

  // =需要甜蜜警報

• 將其添加到您的assets / stylesheets / application.css中

  * =要求甜蜜警報

• 在你的erb文件中添加這一行

  “sweet（＃{params [：id]}，'你確定要刪除嗎？'，'＃{posts_path（params [：id]）}'，'全部刪除'）”，：class =>“delete - 所有紅色文本“％>

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

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