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.