An awesome SweetAlert2 replacement for Rails' confirmation dialogs.

See SweetAlert2 in action!

# Gemfile

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

// app/assets/javascripts/application.js

//= require sweetalert2
//= require rails-sweetalert2-confirm

/* app/assets/stylesheets/application.css

 *= require sweetalert2
 */

Rails 4+

Previous versions may be supported but are untested, use at your own risk!

Basic Setup

Simply implement the link_to with a data: { confirm: 'message' } as you normally would

link_to('Another page', another_page_path, data: { confirm: 'Are you sure you want to leave this page?' })

Remote Setup

Simply implement the link_to with a data: { confirm: 'message' } and remote: true as you normally would

link_to('Another page', another_page_path, remote: true, data: { confirm: 'Are you sure you want to leave this page?' })

Setting Default SweetAlert2 Options

You can define the default sweet alert options globally by creating a js object named sweetAlertConfirmDefaults.

var sweetAlertConfirmDefaults = {
  title: 'Are you sure?',
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: "I'm sure"
  confirmButtonClass: 'btn btn-danger'
  cancelButtonClass: 'btn btn-default',
};

Please refer to the SweetAlert2 Documentation for the correct values

NOTE: If you would like to assign a different sweetSelector then please create the sweetAlertConfirmDefaults object before you import rails_sweetalert2_confirm.js

// rails_sweetalert2_confirm_defaults.js
var sweetAlertConfirmDefaults = {
  sweetSelector: ".sweetalert2_confirm"
}

// application.js
//= require sweetalert2
//= require rails_sweetalert2_confirm_defaults
//= require rails_sweetalert2_confirm

Setting SweetAlert2 Options Per Link

You can define the default sweet alert options per link_to (or submit/button tag) by defining them on data: { swal: {} } as a json object. These will override the default options

link_to(
  'Custom page',
  custom_page_path,
  data: {
    confirm: 'Is this what you want?',
    swal: {
      text: "I'm a subtitle",
      type: 'question',
      confirm_button_class: 'btn btn-default'
    }
  }
)

Please refer to the SweetAlert2 Documentation for the correct values

success	error	warning	info	question

SweetAlert2 works in most major browsers (yes, even IE). Some details:

• IE: 10+, Promise polyfill should be included (see SweetAlert2 usage example).
• Microsoft Edge: 12+
• Safari: 4+
• Firefox: 4+
• Chrome 14+
• Opera: 15+