Rails 4: How to get sweet alert confirm work?

Question

I'm a beginner with rails and I want to use Sweet Alert to replace the basic ugly confirm messages on deleting records. I've added sweet-alert gem and sweet-alert-confirm to my gem file I've done exactly what they said in the their Read Me, but It doesn't work, I can delete records but It got deleted right away without any confirm message of any kind.

Gemfile

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

Application.jssupported directives.

//= 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?' } %>
...

Also, there is somethings I don't know if It worth mention, when I open firebug I find the following error.

Hope you can help me, Thank you.

Answer 1

Thank com unity for the great help!, But yet again I found the answer myself...

Seems there is an issue with the sweetalert gem, So

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 .
    */
   

I kept the sweet-alert-confirm gem, And every thing worked fine. Now I find this sweet message every time I try to delete a record without adding any lines of code...

Note: please explain why you're voting down a question before you do.

Answer 2

I'm not too sure why your question got down voted but I actually faced the same issue a few days back.

Here is a solution without using gems.

1. Download files for Sweet Alerts 2. Add files to load with assets. This will allow you to create alerts using the sweetAlert or swal function.

As noted, you will have to write your own event handler for the confirmation alerts and will require quite a bit of work as they are POST and DELETE request.

2. For such requests, you can use this Javascript code to overwrite the allowAction method. Answer is adapted from: http://thelazylog.com/custom-dialog-for-data-confirm-in-rails/

In application.js or any js file:

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

Had tried with the gems but it did not work for me.

Answer 3

I'm using TurboLinks 5 and none of the provided solutions worked for me, except for this. Probably not the cleanest solution but it works...

Using sweetalert2 gem, add the following to your application.js file.

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

• Add this to your Gemfile:

  gem 'sweetalert-rails'

• Add this to your assets/javascripts/application.js

  //= require sweet-alert

• Add this to your assets/stylesheets/application.css

  *= require sweet-alert

• In your erb file add this line

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

In js file add this code

This code can be used for all alerts through out the project by passing proper parameters.

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

I did not manage to get any of the above solutions to work. (Rails 5, Turbolinks 5).

Finally, what worked for me was to add the following 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;
};